柚子讴歌的博客

自适应布局的几种方法

2018/05/01

自适应布局的几种方法

百分比

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

viewport是网页默认的宽度和高度,width=device-width即网页宽度默认等于屏幕宽度,initial-scale=1即原始缩放比例为1.0,网页初始大小占屏幕面积的100%。

由于网页会根据屏幕宽度调整布局,所以不能使用绝对宽度的布局,也不能使用绝对宽度的元素,如css不能指定像素宽度,只能指定百分比宽度,字体不能使用绝对大小px,而只能使用相对大小em。

@media规则

css3的@media规则可以在不改变html内容情况下,根据终端媒体设备的不同选择不同的css样式

具体写法:

1
2
3
@media 设备类型 and (设备特性){
css样式代码
}

例如:

//浏览器窗口大于900px
@media screen and(min-width:900px){
    body{
        font-size:25px;
    }
}
//浏览器窗口大于500px小于900px
@media screen and(min-width:500px)and(max-width:900px){
    body{
        font-size:20px;
    }
}
//浏览器窗口小于500px
@media screen and(max-width:500px){
    body{
        font-size:15px;
    }
}

rem自适应布局

首先我们需要知道rem是相对于根元素的字体大小的单位,它是一个相对单位,同理em是相对于父元素的字体大小的单位;rem的计算规则依赖根元素,我们只需要在根元素确定一个px字号,就可以计算出元素的宽高。

target-densitydpi属性

1
<meta name="viewport" content="width=640,target-densitydpi=device-dpi,user-scalable=no">

通过读取device-width的值来自动计算出target-densitydpi去实现自适应网页,不过缺点是目前只在android支持,具有兼容性问题。

target-densitydpi属性的取值范围:

device-dpi    --使用设备原本的dpi作为目标dpi,不会发生默认缩放。
high-dpi    --使用hdpi作为目标dpi,中等像素密度和低像素密度设备相应缩小。
medium-dpi    --使用mdpi作为目标dpi,高像素密度设备相应放大,低像素密度设备相应缩小,这是默认的target density
low-dpi        --使用ldpi作为目标dpi,中等像素密度和高像素密度设备相应放大
value        --指定一个具体的dpi,值作为target dpi,这个值得范围必须在70-400之间。
CATALOG
  1. 1. 百分比
  2. 2. @media规则
  3. 3. rem自适应布局
  4. 4. target-densitydpi属性