19 移动端基础和流式布局

19.1 移动端基础

移动端常见浏览器

UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器等。

国内的手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核。因此，兼容移动端主流浏览器，处理Webkit内核浏览器即可。

Chrome DevTools的调试方法详见第 36.2节。

图3.1: 视窗和视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。视口可以分为

如果布局视口宽度 ≠ 视觉视口宽度，出现的情况就是内容过宽，用户可能就需要缩放来查看内容，缩小后，看起来费劲，放大后需要左右滑动查看。

图6.1: 三种视口

<meta name="viewport" content="width=device-width, user-scalable=no,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

表2.1: meta视口标签的属性
属性名	说明
width	布局视口的宽度，可以设置device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scale	用户是否可以缩放，yes或no(1或0)

物理像素点（device pixels，DP）俗称为分辨率，指的是屏幕显示的最小颗粒，是物理真实存在的。比如苹果6、7、8 是 750* 1334。

PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同。一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

Retina（视网膜屏幕）是一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。

对于一张 50px * 50px 的图片,在手机 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

img {
    /* 原始图片100*100px */
    width: 50px;
    height: 50px;
}

background-size 属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;

练习：

1.单独制作移动端页面（主流）

2.响应式页面兼容移动端（其次）

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

有时候想要设置宽度超过或小于某一值的时候不再伸缩，这时候可以设置max-width 最大宽度（max-height 最大高度）和min-width 最小宽度（min-height 最小高度）参数。

section {
    width: 100%;
    max-width: 980px;
    min-width: 520px;
}

练习

要求：设置百分比布局，且要设置宽度超过980px或小于520px时不再伸缩。