移动端布局

移动端布局

移动端基础

移动端浏览器现状

移动端起步较晚，基本以webkit为主，兼容移动端主流浏览器，处理Webkit内核即可，可以放心使用H5标签和CSS3样式

移动端屏幕现状

1. 屏幕尺寸多样、分辨率多样，碎片化严重
2. 作为开发者无需过多关注分辨率，因为我们使用的尺寸单位是px

移动端调试方法

1. Chrome DevTools的模拟移动端调试
2. 搭建本地web服务其，手机和服务器在一个局域网内，通过手机访问服务器
3. 使用外网服务器，直接IP或域名访问

视口

视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口

布局视口 layout viewport

布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。，布局视口的默认宽度有可能是768px、980px或1024px等，这个宽度并不适合在手机屏幕中展示。移动端浏览器之所以采用这样的默认设置，是为了解决早期的PC端页面在手机上显示的问题。

视觉视口 visual viewport

视觉视口是指用户正在看到的网站的区域，这个区域的宽度等同于移动设备的浏览器窗口的宽度。当我们在手机中缩放网页的时候，操作的是视觉视口，而布局视口仍然保持原来的宽度

理想视口 ideal viewport

理想视口是指对设备来讲最理想的视口尺寸。在理想视口中，布局视口的大小和屏幕宽度是一致的，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度。在开发中，为了实现理想视口，需要给移动端页面添加标签配置视口，通知浏览器来进行处理，使得布局视口的宽度与理想视口的宽度一致

meta视口标签

属性	说明
width	viewport的宽度，可以设置为device-width特殊值
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可缩放，yes or no，1 or 0

// 以下为最标准的viewport设置
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

二倍图

物理像素和物理像素比

1. 物理像素指的是屏幕显示的最小颗粒，是物理真实存在的（分辨率）。做开发时候的1px 不一定等于1个物理像素

2. 物理像素比即1个px的能显示的物理像素点的个数

lRetina（视网膜屏幕）与多倍图

1. lRetina：一种显示技术，可以将把更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度。对于一张 50px * 50px 的图片,在手机或 Retina 屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊。

2. **解决方案：**在标准的viewport设置中，使用倍图来提高图片质量，解决在高清设备中的模糊问题

3. 背景缩放background-size：该属性规定背景图像的尺寸

background-size: 背景图片宽度 背景图片高度;
单位：长度、百分比、cover、contain

• cover把背景图像扩展至足够大，以使背景图像完全覆盖背景区域（高度宽度等比拉伸，覆盖完全覆盖区域）
• contain把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域（高度、宽度等比拉伸，可能存在空白区域）

移动开发选择和技术解决方案

移动端开发选择

1. 单独制作移动端页面（主流）
   • 京东商城
   • 淘宝
   • 苏宁易购
2. 响应式页面兼容移动端：即pc和移动端共用一套网站，只不过在不同屏幕下，样式会自动适配，制作麻烦需要话费大量尽力调兼容性问题
   • 三星手机官网

移动端技术解决方案

1. 兼容性问题：只需考虑webkit兼容性问题，可以大胆使用H5和CSS3样式，浏览器的私有前缀我们只需要考虑添加 webkit 即可

2. 移动端公共样式：移动端CSS 初始化推荐使用 normalize.css

   • 保护了有价值的默认值
   • 修复了浏览器的bug