移动web开发01-流式布局
视口
视口定义
定义 就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口。
- 布局视口（layout viewport） 一般手机浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
- 视觉视口（visual viewport） 用户正在看到的网站的区域。
- 理想视口（ideal viewport） 对设备来讲，理想视口是最理想的视口尺寸。
meta视口标签
主要目的 布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽。
属性
标准写法：
- width：可视区域的宽度，值可为数字或关键词device-width
- height：同width
- intial-scale：页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放。
- maximum-scale=1.0, minimum-scale=1.0：可视区域的缩放级别，maximum-scale表示用户可将页面放大的程度，1.0将禁止用户放大到实际尺寸之上。
- user-scalable：是否可对页面进行缩放，no 禁止缩放。
二倍图
物理像素&物理像素比
- 物理像素：设备像素（分辨率），一个设备的分辨率是固定的。
- 逻辑像素：CSS样式代码中使用的是逻辑像素，样式中的1px指一个逻辑像素。
- 物理像素比：物理像素与逻辑像素之间的比例，一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。当像素比为1:1时，使用1个物理像素显示1个逻辑像素；当像素比为2:1时，使用4个物理像素显示1个逻辑像素。
二倍图
为什么需要二倍图
- 当物理像素比（window.devicePixelRatio）为2:1时，需要使用4个设备像素显示1个CSS像素。
- 对于一张 50px * 50px 的图片，在手机或 Retina 屏中打开，会按照2:1放大到100px* 100px，这样会造成图片模糊。
- 在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题。
- [怎么做] 需要导入100px* 100px的图，用css缩到50px * 50px。
img{
/* 原始图片100px* 100px */
width: 50px;
height: 50px;
}
- 还存在三倍图，四倍图的情况。
背景缩放
- background-size：属性规定背景图像的尺寸
- background-size：背景图片宽度 背景图片高度（只写一个参数width会等比缩放）
- cover：把背景图像等比扩展至足够大，以使背景图像完全覆盖背景区域(内容可能显示不全)。
- contain：把图像图像等比扩展至最大尺寸，以使其宽度或高度完全适应内容区域(可能有空白区域)。
移动端开发选择
- 单独制作移动端页面（主流）
- 通常情况下，网址域名前面加m(mobile) 可以打开移动端。通过判断设备，如果是移动设备打开，则跳到移动端页面。
- 响应式页面兼容移动端（其次）
- 三星电子官网：www.samsung.com/cn/ ，通过判断屏幕宽度来改变样式，以适应不同终端。
- 缺点：制作麻烦，需要花很大精力去调兼容性问题。
移动端技术解决方案
- 移动端浏览器基本以webkit 内核为主，因此我们就考虑webkit兼容性问题。
- 移动端CSS 初始化推荐使用normalize.css/
CSS3 盒子模型box-sizing
- 传统模式宽度计算：盒子的宽度= CSS中设置的width + border + padding
box-sizing: content-box; - CSS3盒子模型：盒子的宽度= CSS中设置的宽度width 里面包含了border 和padding
box-sizing: border-box; - PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3 盒子模型。
特殊样式
/*CSS3盒子模型*/
box-sizing: border-box;
-webkit-box-sizing: border-box;
/*点击高亮我们需要清除清除 设置为transparent 完成透明*/
-webkit-tap-highlight-color: transparent;
/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance: none;
/*禁用长按页面时的弹出菜单*/
img,a { -webkit-touch-callout: none; }
移动端常见布局
- 单独制作移动端页面
- 流式布局（百分比布局）
- flex 弹性布局（强烈推荐）
- less+rem+媒体查询布局
- 混合布局
- 响应式页面兼容移动端
- 媒体查询
- bootstrap
流式布局（百分比布局）
- 流式布局，就是百分比布局，也称非固定像素布局。
- 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。
- 流式布局方式是移动web开发使用的比较常见的布局方式。
- max-width 最大宽度（max-height 最大高度）
- min-width 最小宽度（min-height 最小高度）
