移动端常见布局

1.视口

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

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

meta视口标签

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

 

 

 

 

 

 

 

 

 

 

 

2.像素

物理像素：屏幕显示的最小颗粒

pc端1px等于1个物理像素，移动端不同

物理像素比：一个px显示的物理像素点的个数

 

二倍图　　cutterman

background-size: 长度|百分比|cover|contain;

长度只写一个参数，默认是宽度，长度等比缩放

cover把背景图像扩展至足够大，完全覆盖背景区域9（图像可能显示不全）

contain把图像等比缩放，宽或高完全适应内容区域的最大图像（可能有空白）

二倍精灵图

• 在firework里面把精灵图等比例缩放为原来的一半，不要保存
•  之后根据大小测量坐标
• 注意代码里面background-size也要写：精灵图原来宽度的一半

 

3.移动端开发选择

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

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

flex弹性布局（强烈推荐）　　携程

less+rem+媒体查询布局　　苏宁

混合布局

响应式页面兼容移动端（其次）　　三星　　*麻烦，兼容问题

媒体查询

bootstarp

 

移动端css初始化推荐使用　　normalize.css

优点：

保护了有价值的默认值

修复了浏览器的bug

是模块化的

拥有详细的文档

 

CSS3盒子模型　　box-sizing

传统盒子模型计算：盒子宽度=css设置的width+border+padding　　　　　　　　　　　　　　　content-box

CSS3盒子模型：盒子宽度=css设置的width（其中包含了border和padding，不会撑大盒子）　　　border-box　　　　

移动端可以全部兼容CSS3盒子模型，PC端如果需要完全兼容则用传统盒子模型，不考虑兼容问题，就选择CSS3盒子模型。

常见移动端特殊样式解决方案

/* CSS3盒子模型 */
box-sizing: border-box;
-webkit-box-sizing: border-box;

/* 点击高亮我们需要清除 设置为transparent透明 */
-webkit-tap-highlight-color: transparent;

/* 移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式 */
-webkit-appearance: none;

/* 禁用长按页面时的弹出菜单 */
img.a { -webkit-touch-callout: none; }

4.移动端常见布局

• 流式布局

  • 流式布局，就是百分比布局，也称非固定像素布局。

  • 通过子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制,内容向两侧填充。

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

  • max-width最大宽度（max-height最大高度）

  • min-width最小宽度（min-height最大高度）

• flex布局 
• rem适配布局

原理：动态设置 html 根标签的 font-size 大小（媒体查询），px 等比换算成 rem

技术方案1：less 、媒体查询 、rem

技术方案2：flexible.js 、rem　　更简单　推荐

• • rem（root em）是一个相对单位
    • 类似于 em，em 是父元素字体大小。不同的是 rem 的基准是相对于html元素的字体大小
      
    • 优点：可以通过修改 html 的文字大小来整体修改页面元素的大小
  • 媒体查询（Media Query）是 CSS3 新语法。
    • 使用 @media 查询，可以针对不同的媒体类型定义不同的样式

      /* 语法规范 */
      /* 按大小顺序写 */
      
      <style>
          @media mediatype and|not|only (media feature) {
              CSS-Code;
          }
      </style>
      /* 用@media开头注意@符号 */
      /* mediatype媒体类型（all，所有设备；print，打印机和打印预览；screen，电脑、平板、手机等） */
      /* 关键字 and not only */
      /* media feature 媒体特性必须有小括包含（了解三个，width，min-width，max-width） */

    • @media 可以针对不同的屏幕尺寸设置不同的样式
    • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
    • 目前针对很多苹果手机、Android手机、平板等设备都用到多媒体查询
    • 引入资源（理解），当样式比较繁多的时候，我们可以针对不同的媒体使用不同的 stylesheets

      /* 语法规范 */
      /* 针对不同的屏幕尺寸，调用不同的css文件 */
      
      <link rel="stylesheet" href="stylesheet.css" media="mediatype and|not|only (media feature)">

  • Less （Leaner Style Sheets）是一门 CSS 扩展语言，也成为 CSS 预处理器
    • 在 CSS 语法基础上，引入变量，Mixin（混入），运算以及函数等功能
    • 常见的 CSS 预处理器有 Sass、Less、Stylus

• 响应式开发

原理：使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备

设备划分	尺寸区间	设置宽度
超小屏幕（手机）	<768px	宽度设为100%
小屏设备（平板）	>=768px ~ <992px	宽度设为750px
中等屏幕（桌面显示器）	>=992px ~ 1200px	宽度设为920px
宽屏设备（大桌面显示器）	>=1200px	宽度设为1170px

 

 

 

 

 

 

 

• • Bootstrap
    • 来自 Twitter，是目前最受欢迎的前端框架，基于 HTML、CSS 和 JavaScript，简单灵活
    • 优点：标准化的 html + css 编码规范。简洁、直观、强悍的组件。不断更新迭代，开发更简单效率
    • 版本
      • 2.x.x，停止维护，兼容性好，代码不够简洁，功能不够完善
      • 3.x.x，目前使用最多，稳定，但是放弃了IE6-IE7，IE8支持但效果不好，偏向用于开发响应式布局、移动设备优先的WEB项目
      • 4.x.x，最新版，目前还不是很流行　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

        Bootstrap提供的两个容器

        container类		container-fluid类
        响应式布局容器固定宽度 1170px 920px 750px 100%	类前缀： .col-lg- .col-md- .col-sm- .col-xs-	流式布局容器百分百宽度 占据全部视口容器 适合单独做移动端开发

 

 

 

 

 

 

 

 

• • • 栅格系统
      • 将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
      • Bootstrap 自动将 container 分为12列
      • 通过一系列行与列的组合来创建页面布局
      • =12，占满 container。<12，会有空白。>12，换行
      • 可以同时为一列指定多个设备类名，以便划分不同分数，例如 class="col-md-4 col-sm-6"
      • 列嵌套，col 中嵌套 row，可消除 padding
      • 列偏移，.col-md-offset-* 可以将列向右偏移几份，实际上是添加了 margin-left
      • 列排序，.col-md-push-* 和 .col-md-pull-* 可以改变列的顺序
      • 隐藏 .hidden-xs（隐藏超小屏）...相反的是显示 .visible-xs