至于CSS中字体响应式的设置

target-densitydpi:点名页面在怎么的dpi下显得。屏幕像素密度是由屏幕分辨率来决定的,通常定义为每英寸点的数额,即dpi。Android支持两种dpi设置:低像素密度(low-dpi),中像素密度(medium-dpi),高像素密度(high-dpi)。低像素密度的屏幕每英寸上的像素点少,而高像素密度的屏幕每英寸上的像素点多。Android
Browser和WebView默认屏幕为中像素密度。也得以一直指定一个现实的dpi值,该值允许的限定为70-400期间。device-dpi代表以设施默认的dpi来突显页面。

  例如我们可以在体制表中定义如下样式:

rem:CSS3新增的一个针锋相对单位。与em的第一区别在于利用rem为因素设定字体大时辰,如故是相对大小,但相对的只是HTML根元素。这些单位可谓集相对大小和相对大小的亮点于寥寥,通过它既可以成功只修改根元素就成比例地调整具有字体大小,又有何不可避免字体大小逐层复合的相关反应。最近,除了IE8及更早版本外,所有浏览器均已协理rem。对于不襄助它的浏览器,应对艺术也很简单,就是多写一个万万单位的扬言。这一个浏览器会忽略用rem设定的字体大小。

  完整的viewport语法如下:

Bootstrap,pt:印刷业上常使用的单位,一般用于页面打印排版,即磅的情趣。

initial-scale:页面的起来缩放比例,值允许为小数,表示近年来页面大小的翻番。例如2.0意味页面开端状态下会被放大2倍。

  在拓展页面响应式设计中,往往需要依照屏幕分辨率来显示不同大小的字体。日常的做法是通过media
queries
给不同的分辨率指定不同的书体样式,例如:

  viewport是HTML5中新加盟的一个meta标记,其重点功效是为活动客户端的浏览器举办体现优化。通过设置viewport的属性值,可以决定当前页面默认使用什么的办法在活动端的浏览器中体现页面。下边是一个常用的针对移动网页优化过的页面的viewport
meta标记的设置项:

  除此之外,大家还足以经过下边的不二法门让字体自适应屏幕分辨率。

maxmium-scale:和minimun-scale对应,表示最大允许缩放比例。

vw/vh/vmin/vmax:地点已经介绍了,表示字体相对于viewport高或宽的深浅。

body
{
       font-size: 22px; 
}
h1
{
       font-size:44px;
}

@media (min-width: 768)
{
       body
       {
           font-size: 17px; 
       }
       h1
       {
           font-size:24px;
       }
}

  注意:所有的缩放值都必须在0.01-10的限量之内,否则无效。

CSS中两种不同单位之间的可比

 

minimum-scale:小小允许缩放比例,值允许为小数,表示页面最小能以多大的翻番呈现。例如2.0代表页面不可能压缩到2倍以下举行展现。

width:和height对应,表示viewport的宽窄。devive-width表示设备的冲天。

height:控制viewport的低度,可以指定一个稳定的值,或者device-height来表示设备的惊人(单位为缩放100%时的像素值)。

px:像素(Pixel)。相对长度单位,所占大小由屏幕分辨率决定。

  假若想让页面协助响应式设计,需要给页面添加viewport
meta标记。详见Bootstrap中的响应式设计

<!-- html document -->
<meta name="viewport"
        content="
            height = [pixel_value | device-height] ,
            width = [pixel_value | device-width ] ,
            initial-scale = float_value ,
            minimum-scale = float_value ,
            maximum-scale = float_value ,
            user-scalable = [yes | no] ,
            target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]
        "
/>

%:其余大家仍可以拔取百分比来指定大小,它意味着目前字体相对于浏览器默认字体大小的倍数。该单位在页面响应式设计中也被平常用到。

h1 {
  font-size: 5.9vw;
}

h2 {
  font-size: 3.0vh;
}

p {
  font-size: 2vmin;
}

 

<meta name="viewport" content="width =device-width, initial-scale=1, maximum-scale=1"/>

什么是viewport?

user-scalable:是否同意用户缩放页面。默认值为yes,当设置为no时minimum-scale和maximum-scale无效。

em:周旋长度单位。相当于近期目标内文本的书体尺寸,假设当前对行内文本的字体尺寸未被认为设置,则相对于浏览器的默认字体尺寸。em的值并不是原则性的,它会延续父级元素的字体大小。所有未经调整的浏览器都合乎:
1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的折算,需要在css中的body采纳器中声称Font-size=62.5%,这就使em值变为
16px*62.5%=10px, 这样12px=1.2em, 10px=1em,
也就是说只需要将你的原本的px数值除以10,然后换上em作为单位就行了。

1vw = viewport宽度的1%
1vh = viewport高度的1%
1vmin = 1vw或者1vh中较小的值
1vmax = 1vw或者1vh中较大的值

相关文章