01 流式布局

# 1.移动端基础 #

移动端浏览器主要对webkit内核进行兼容
我们现在开发的移动端主要针对手机端开发
移动端碎片化沿着分辨率和屏幕尺寸大小不一样
学会谷歌浏览器模拟手机界面调试

# 2.视口

## 2.1 布局视口 layout viewport ##

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

## 2.2 视觉视口 visual viewport##

视觉


- 字面意思，他是用户正在看到的网站的区域。注意：是网站的区域

-我们可以通过缩放去操作视觉视口，但不会影响布局视口 

## 2.3 理想视口 ideal viewport ##

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

## 2.4 meta视口标签 ##

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

## 2.5 标准viewport设置 ##

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

# 3.二倍图 ##
## 3.1 物理像素&物理像素比 ##

注意

- 物理像素点指的是屏幕显示的最小颗粒，是物理上真实存在的

- 我们开发的时候1px不是一定等于1个物理像素 

- pc端页面1px等于一个物理像素，但是移动端不一样

- 一个px能显示的物理像素点的个数成为物理像素比

因为视网膜屏幕显示技术可以将更多地物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕显示的细腻程度

    /* 需要一个50 * 50像素的图片（css） 直接放到iphone8里面  物理像素点2.0 会变模糊 */
    /* 我们采取的是放一个100 * 100 图片 手动把这个图片 缩小为 50 * 50*/
    /* 我们准备的图片 比我们实际需要的大小 大两倍 就叫做两倍图 */
css
       
    img:nth-child(2) {
        width: 50px;
        height: 50px;
    }

html 

    <!-- 模糊的 -->
    <img src="images/apple50.jpg" alt="">
    <!-- 我们采取2倍图 -->
    <img src="images/apple100.jpg" alt="">


## 3.2 背景缩放 background-size ##

属性规定背景图像的尺寸

background-size:背景图片宽度 背景图片高度;

- 单位：长度 | 百分比|cover |contain

- cover 把背景扩展至足够大，使背景图像完全覆盖背景区域

- contain 把图像扩展至最大尺寸。使宽度和高度完全适应内容区域


# 4.移动端开发选择 #

## 4.1 移动端主流方案 ##

单独移动端页面（主流）

响应式

## 4.2 单独移动端页面（主流） ##

网址域名前面加 m 可以打开移动端 通过判断设备，如果是移动设备打开，则跳到移动端页面

缺点：制作麻烦，需要花很大精力去调兼容性

# 5.移动端技术解决方案 #
## 5.1 移动端浏览器 ##

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

私有前缀考虑添加webkit


## 5.2 css初始化 normalize.css ##


保护有价值的默认值
修复浏览器debug
模块化
有详细文档

## 5.3 css3盒子模型 ##

css3盒子宽度 = css中设置的宽度（包含border 和padding）
box-sizing: border-box;
box-sizing: content-box;

    div:nth-child(1) {
        /* 传统盒子模型 = width + padding + border */
        width: 200px;
        height: 200px;
        background-color: pink;
        padding: 10px;
        border: 10px solid red;
    }
    
    div:nth-child(2) {
        /* 让盒子变成css3样式 */
        /* padding 和 border不会再撑大盒子 */
        box-sizing: border-box;
        width: 200px;
        height: 200px;
        background-color: skyblue;
        border: 10px solid blue;
    }

pc端如果完全需要兼容就用传统模式，不考虑兼容性就使用css3

## 5.4 特殊样式 ##

    a {
        /* 清除高亮 */
        -webkit-tap-highlight-color: transparent;
    }
    
    input {
        /* 清除按钮默认样式 */
        -webkit-appearance: none;
    }
    img,a {
        /* 禁止长按页面上弹出菜单*/
        -webkit-touch-callout:none;
    }

# 6.移动端常见布局 #

1、移动端技术选型 主流

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

- flex弹性布局

- less+rem+媒体查询布局

- 混合布局

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

- 媒体查询

- bootstarp

## 6.1 流式布局 ##

- 也称非固定像素布局

- 通过合资的宽度设置成百分比根据屏幕宽度进行伸缩，不受固定像素，内容向两侧填充

- 流式布局是移动web开发使用比较常见的布局方式

- max-width 最大宽度

- min-width 最小宽度

## 6.2 二倍精灵图做法 ##

在ps中把精灵图等比例缩放为原来一半

根据大小 测量坐标

css样式中背景大小设置也缩放为原来一半