流式布局 - Tung in ECNU


流式布局

移动端基础

  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 的时候图片底部贴到基线和文字对齐

单独制作移动端页面(主流)响应式页面兼容移动端
流式布局媒体查询
flex布局bootstarp
less+rem+媒体查询布局

本文链接:

https://noahtung.xyz/index.php/archives/28/