移动端基础

兼容移动端主流浏览器，处理webkit内核浏览器即可

视口

viewport 是浏览器显示页面内容的屏幕区域，视口分为 布局视口、视觉视口和理想视口

布局视口 layout viewport

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

视觉视口 visual viewport

• 是用户正在看到的网站的区域 ， 注意 ： 是网站的区域
• 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

理想视口 ideal viewport

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

meta 视口标签

这是标准的视口设置 ：

        1、视口宽度和设备一样
        2、视口的默认缩放比例是 1.0
        3、不允许用户自行缩放
        4、最大允许的缩放比例是 1.0
        5、最小允许的缩放比例是 1.0
   

物理像素 & 物理像素比

• 物理像素点 就是指的是 屏幕显示的最小颗粒 ，是物理真实存在的。这是厂商在出厂的时候就设置好了
• 在开发的时候1px 不一定就是等于1个物理像素的
• pc页面，1px等于1个物理像素，但是移动端不尽相同
• 一个px的能显示的物理像素点的个数 ，就是物理像素比

在pc端写的 1px ，在移动端页面中显示的时候不是1px

在iphone8中 1px 就等于 2物理像素比

二倍图

在标准的视口中，采取的是 倍图 的形式来

移动端开发选择

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

在网站域名前面加** m（mobile）** 可以打开移动端 。 通过判断设备，若是移动设备打开，那么就跳到移动端页面

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

通过改变屏幕的宽度，来改变样式，以适应不同的终端

缺点：制作麻烦，需要花很大精力去调试页面

移动端技术解决方案

webkit兼容性

• 基本以webkit内核为主，所以我们就考虑webkit兼容性问题

• 我们可以放心使用h5和css

• 同时我们浏览器的私有前缀我们只需要考虑webkit即可

css初始化

css初始化 normalize.css

移动端css初始化推荐了 normalize.css/

官网地址 : Normalize.css: Make browsers render all elements more consistently. (necolas.github.io)

css3盒子模型

css3 盒子模型 box-sizing

• 传统盒子模型

盒子的宽度 = border + padding + 本身的width

• 怪异盒模型

盒子宽度 = 本身的width

移动端特殊样式

a链接高光

input 外观

移动端常见布局

单独制作

• 流式布局（百分比布局）

• flex弹性布局（！！！！）

• less + rem + 媒体查询布局

• 混合布局

响应式

• 媒体查询

• bootstrap