PC端与移动端的适配问题
响应式布局
同一页面在不同屏幕尺寸下有不同的布局,实现不同屏幕分辨率的终端上浏览网页的不同展示方式。
1.设置meta标签
例如:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
视口就是网页可见区域的尺寸,设置视口时只设置宽度就行,不用在乎高度,具体高度由网页内容自动撑开。上面 meta 标签中内容的含义如下:
viewport:即视口,表示网页的可视区域;
width:控制 viewport 的大小,可以指定一个具体的值,例如 600,也可以是由关键字组成的特殊值,例如 device-width 就表示设备的宽度;
initial-scale:表示初始缩放比例,也就是页面第一次加载时的缩放比例;
maximum-scale:表示允许用户缩放的最大比例,范围从 0 到 10.0;
minimum-scale:表示允许用户缩放到最小比例,范围从 0 到 10.0;
user-scalable:表示用户是否可以手动缩放,“yes”表示允许缩放,“no”表示禁止缩放。
2.媒体查询
根据指定的条件,针对不同的媒体类型(screen print)定义不同的 CSS 样式,让使用不同设备的用户都能得到最佳的体验。
@media (min-width: 321px) and (max-width: 375px) {
/*宽度范围321~375 显示为红色*/
body {
background: red;
}
}
@media (min-width: 376px) and (max-width: 425px) {
/*宽度范围376~425 显示为黄色*/
body {
background: yellow;
}
}
Flex布局
弹性布局,非常简便、灵活、完整。详细参考阮一峰的日志。
流体布局
使用百分比、em、rem设置元素,也可以用计算函数calc()。
单位em与rem的区别
em
子元素字体大小的em,指的是相对于父元素字体大小的百分比。
元素width/height/padding/margin属性使用em,指的是相对于自身字体大小的百分比。
rem
无论什么元素,rem指的是相对于根元素字体大小的百分比,一般根元素为。