流式布局

移动端基础

1. 移动端浏览器主要对webkit内核进行兼容

2. 视口 ： 浏览器显示页面内容的屏幕区域

   1. 布局视口
   2. 视觉视口
   3. 理想视口 （重要） 为了使网站在移动端有最理想的浏览体验
      meta视口标签的主要目的：布局视口的宽度和理想视口的宽度一致

3. mate视口属性

   1. width 设置视口宽度，一般是device-width 和设备等宽
   2. initial-scale 初始缩放比，大于0，一般取1.0
   3. maximum-scale 最大缩放比，大于0，一般取1.0
   4. minimum-scale 最小缩放比，大于0，一般取1.0
   5. user-scale 用户是否可以缩放 yes=1 no=0 一般在m站中不允许缩放

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

二倍图

1. 物理像素 代表了实际分辨率

2. 在开发时1px不一定代表1物理像素

   1. 在移动端1px不等于一个物理像素（Retina屏及之后）iPhone45678都是像素比都是2.0
   2. 在PC端1px等于一个物理像素

3. 压缩两倍图

   1. 假设有一张 100*100 px 实际像素的图
   2. 在css中对其样式做修改 width:50px height:50px

   3. 对背景图片缩放 background-size : 宽 高 （如果只写一个参数则为宽）

      1. 可以设百分比缩放，相对于父盒子
      2. cover （覆盖满容器，横纵比例不变）
      3. contain 扩大到最大尺寸（填满容器，适应容器比例）

移动端开发

1. 单独建一个m站 （主流）
2. 响应式布局，兼容性比较难调
3. 移动端的样式初始化 normalize.css

盒子模型

1. 传统模式宽度计算：盒子宽度 = width+border+padding （PC端视情况而定）
2. CSS3 盒子模型 ：盒子宽度 width 包含 border+padding （移动端全使用C3）
3. 使用 box-sizing:border-box 让盒子变成C3盒子
4. 使用 box-sizing:content-box 传统盒子

常见布局

1. 注意需要设置好最大最小宽度来保证阅读体验
2. vertical-align: middle; 图片垂直居中

在默认使用text-align = center 的时候图片底部贴到基线和文字对齐

本文链接：