1.     三种布局方式:
  3.      1. 流式布局  (宽度设置为百分比模式,高度自适应)
  4.      2. flex弹性布局
  5.      3. less+rem+媒体查询布局

在日常使用中以一种为主其他为辅,进行混合布局(个人比较期望使用以flex为主)

14.1 移动端基础

1. 移动端浏览器现状

由于移动端浏览器起步较晚,所以基本使用的都是比较新的技术,像国内的移动端浏览器内核基本都是根据Webkit进行修改的,目前国内尚无自主研发的浏览器内核.

2. 当前手机屏幕现状

随着各种屏幕的出现,手机屏幕也逐步走向碎片化,不同尺寸的屏幕越来越多,但开发不需要关心屏幕现状,因为使用的是px(CSS像素,后面会说明)

3. 移动端调试方法

有以下三种：

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

4.移动端开发

  1.      - 移动端开发，就是编写移动端的网页
  2.      - 移动端浏览器我们主要对webkit内核进行兼容
  3.      - 我们现在开发的移动端主要针对手机端开发（pad屏幕较大，可以使用PC端界面）
  4.      - 现在移动端碎片化比较严重，分辨率和屏幕尺寸大小不一
  5.      - 学会用谷歌浏览器模拟手机界面以及调试

14.2 视口

手机浏览器显示页面内容的屏幕区域,视口分为三种
1.布局视口
2.视觉视口
3.理想视口

2.1 布局视口(layout viewport )

移动端浏览器默认设置的视口,解决早期pc端页面在移动端的显示问题
视口为980px的宽度,可以将大多数页面在移动端显示,不过缺点是元素显示太小,可以使用手势缩放页面

2.2 视觉视口(visual viewport)

以布局视口的前提下用户通过移动端显示器看到的页面区域,注意是区域,不是整个页面,缩放视觉视口不会影响布局视口.

2.3 理想视口(ideal viewport)

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

简单来说就是重新制作适合移动端的页面,或者pc和移动端兼容的响应式布局

2.4 meta标签

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

最标准的viewport设置

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

  • 最小允许的缩放比例1.0

    14.3 二倍图

    3.1 物理像素和其比例

    1. - 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6 是  750* 1334
    2. - **物理像素其实就是我们的分辨率，分辨率为750*1344，那么一行可以放750个像素点**
    3. - 我们开发时候的1px 不是一定等于1个物理像素的
    4. - PC端页面，1个px 等于1个物理像素的，但是移动端就不尽相同    
    5. - **一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比**
    6. - 如果把1张100*100的图片放到手机里面会按照物理像素比给我们缩放

    3.2 二倍图

    由于一般图片经过移动端显示后会因为CSS像素和物理像素比从而放大模糊,所以可以通过提前放大图片再进行缩小来达到再移动端显示不会模糊的效果
    每种移动设备物理像素和CSS像素的比例是不同的但基本都在1.0及以上。通过对装图片的盒子进行缩小，再对图片设置_width:100%;来缩小图片或是对背景图片_background-size来设置图片的尺寸，来达到在移动端显示图片不失真的效果。（backgroudn-size在背景属性里提到过）

    14.4 移动端技术解决方案

    4.1 移动端兼容性问题

    移动端技术较新，只需要考虑webkit的问题

    4.2 移动端公共样式

    看这里

    4.3 移动端大量使用 CSS3盒子模型box-sizing

    1. - 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding
    2. - CSS3盒子模型：     盒子的宽度=  CSS中设置的宽度width 里面包含了 border 和 padding
    3. - 也就是说，我们的CSS3中的盒子模型， padding 和 border 不会撑大盒子了
    4. - 代码：
    1. /*CSS3盒子模型：border-box，边框盒子，理解：从边框开始计算盒子的大小（包括边框内部所有内容，边框，内边距，内容）*/
    2. box-sizing: border-box;
    3. /*传统盒子模型：content-box，内容盒子，理解：从内容开始计算盒子大小（只包括内容）*/
    4. box-sizing: content-box;
    1. - 移动端可以全部CSS3 盒子模型
    2. - PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择 CSS3 盒子模型

    4.4 移动端特殊样式

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