移动端布局学前须知

本篇主要介绍在学习移动端布局前需要了解的一些知识，方便后续的学习。

---

移动端常见浏览器
移动端调试方法
视口
二倍图
移动端开发选择·
移动端技术解决方案·
移动端常见布局·

---

移动端常见浏览器

移动端浏览器相对于PC端来说，浏览器更多。 如UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器、搜狗手机浏览器、猎豹浏览器，以及其他杂牌浏览器。

其中，国内UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。

---

移动端调试方法

• Chrome DevTools（谷歌浏览器）的模拟手机调试
• 搭建本地web服务器，手机和服务器一个局域网内，通过手机访问服务器
• 使用外网服务器，直接IP或域名访问

---

视口

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

1.布局视口 layout viewport

• 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
• iOS、Android基本都将这个视口分辨率设置为980px，所以PC端的页面大多都能在手机上呈现，只不过元素看上去很小，一般默认可以手动缩放页面。

2.视觉视口 visual viewport

• 顾名思义，就是指用户正看到的网站区域，通俗地讲就是在设备上能看到的属于原网站的区域。
• 我们可以通过缩放更改视觉视口，但不会影响布局视口。

3.理想视口 ideal viewport

• 为了使网站在移动端有最理想的浏览和阅读体验而设定
• 需要手动添写meta视口标签通知浏览器操作
• meta视口标签主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备多宽，我们布局视口就多宽。

meta视口标签

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

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

标准的viewport设置

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许缩放比例1.0
• 最小允许缩放比例1.0

---

二倍图

物理像素&物理像素比

• 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商出厂时就设置好的，比如苹果6、7、8是750*1334.
• 我们开发时1px不是一定等于1个物理像素的
• PC端页面，1个px等于1个物理像素，但是移动端不尽相同。
• 一个px能显示的物理像素点的个数，称为物理像素比。

由于移动端设备相对于PC端普遍比较小，为了显示的更高清，出现了Retina技术。

Retina（视网膜屏幕）是一种显示技术，可以把更多的物理像素点压缩，从而达到更高的分辨率，也就是提高了物理像素比。

因此，如果对于一张50px50px的图片，在Retina屏中打开，按照刚才的物理像素比放大倍数，会将图片模糊，因此可以使用倍图来提高图片质量。如准备一张100px100px的高清图片，将其宽高设为50，按照物理像素比放大不会影响它的质量，因为它100px*100px时就是张高清的图片。

不但有二倍图，现在还有三倍图以及更多倍的情况，看实际情况而定。

---

移动端开发选择

1.单独制作移动端页面（主流）
例如：
京东商城手机版
淘宝手机版
苏宁易购手机版

通常网站域名前加m可以跳转,如m.jd.com

2.响应式页面兼容移动版
例如：
三星手机官网

PC端移动端就写一个页面，它可以通过判断屏幕的宽度来改变样式，以适应不同终端。
缺点：制作麻烦，需要花费很大精力去调兼容性问题。

---

移动端技术解决方案

1.移动端浏览器
移动端浏览器基本使用了webkit内核，因此就webkit兼容问题，我们可以放心使用H5标签和CSS3样式，同时我们浏览器的私有前缀只需要考虑webkit即可。

2.CSS初始化
移动端CSS的初始化建议使用 normalize.css

• Normalize.css: 保护了有价值的默认值
• Normalize.css: 修复了浏览器的bug
• Normalize.css: 是模块化的
• Normalize.css：有详细的文档

官网地址：http://necolas.github.io/normalize.css/

3.特殊样式

 /* CSS3盒子模型 */
           box-sizing: border-box;
           -webkit-box-sizing: border-box;
           /* 点击高亮我们需要清除，设为透明 */
           -webkit-tap-highlight-color: transparent;
           /* 在移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式 */
            -webkit-appearance: none;
            /* 禁用长按页面弹出菜单 */
            img,a{
                -webkit-touch-callout: none;
            }

---

移动端常见布局

1.单独制作移动端页面

• 流式布局（百分比布局）
• flex弹性布局
• less+rem+媒体查询布局
• 混合布局

2.响应式页面兼容移动端

• 媒体查询
• bootstarp