移动web开发--移动端常见布局+流式布局和flex布局+携程网首页案例

浏览器私有前缀

为了兼容老版本
私有前缀

• -moz- : fixfox 浏览器私有属性
• -ms- : ie浏览器私有属性
• -webkit- : safari、chrome私有属性
• -o- ： Opera私有属性
  提倡写法
  -moz-border-radius ：10px；
  -ms-border-radius ：10px；
  -webkit-border-radius ：10px；
  -o-border-radius ：10px；
  分割线-----------------------------------------------------------

移动端基础

国内的移动端浏览器是根据webkit修改的内核，兼容移动端主流浏览器，处理webkit内核浏览器即可。

手机屏幕大小不同，分辨率不同；不用关注分辨率

移动端调试方法

• chrome DevTools（谷歌浏览器）的模拟手机调试
• 搭建本地web服务器，手机和服务器在一个局域网内，通过手机访问服务器。
• 使用外网服务器，访问IP或者域名访问。

视口

视口：就是浏览器显示页面内容的屏幕区域。
视口可分为布局视口、视觉视口和理想视口

布局视口 layout viewport
iOS、Android基本上将这个视口分辨率设置为980px，所以pc上的网页大多都能在手机上呈现，只是元素看上去很小，可以通过手动缩放页面。

视觉视口 visual viewport
用户能看到的区域，网站的区域

理想视口 ideal viewport
网站在移动端最理想的浏览和阅读宽度而设定。
需要手动添加meta视口标签通知浏览器操作。

meta视口标签

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

标准viewport设置

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

二倍图

物理像素：屏幕显示的最小颗粒，是物理真实存在的（分辨率）。
开发时候的1px不是一定等于1个物理像素。
pc端1px=1个物理像素，移动端不尽相同。
一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比。

背景缩放 background-size

规定背景图像尺寸：
background-size：图像宽度 图像高度；

• 只写一个参数，就是宽度，高度等比例缩放。
• 单位可以用%，先对于父盒子
• cover 要完全覆盖父盒子，可能有部分背景图片显示不全
• contain 高度、宽度等比例拉伸，图像扩展至最大尺寸，有一个铺满盒子就不再拉伸了，可能有部分空白区域。

移动端开发选择

移动端主流方案
1.单独制作移动端页面（主流）
网址域名前加m（mobile）可以打开手机端页面
2.响应式兼容PC移动端
通过屏幕宽度来改变样式，以适应不同终端
缺点：制作麻烦，需要花费大量时间去调兼容性问题。

移动端技术解决方案

移动端css初始化推荐 normalize.css
css3 盒子模型 box-sizing：border-box；//盒子不会被撑大。
移动端可以全部用Css3；pc端要考虑兼容就用传统模式。
移动端链接清除点击高亮：-webkit-tap-highlight-color：transparent；
移动端按钮清除外观亮光效果：-webkit-appearance：none；
移动端禁止长按页面时弹出菜单： img，a{-webkit-touch-callout：none；}

移动端常见布局-流式布局

• 流式布局
  1、又称“百分比布局”，也称非固定像素布局。
  2、通过把盒子的宽度设置成百分比，根据屏幕的宽度来进行伸缩，不受固定像素限制，内容向两侧填充。
  3、是移动开发比较常见的布局
  4、添加最大值和最小值保证页面内容
  max-width 最大宽度（max-height 最大高度）
  min-width 最小宽度 （min-height 最小高度）

案例:京东移动端首页
方案：单独制作移动页面方案
技术：布局采用 流式布局
引入css初始化
图片和文字要写vertical-align:middle。

flex布局

pc端浏览器支持情况较差

flex布局原理:
弹性布局,任何容器都可以指定为flex布局

• 将父盒子设置为flex布局后,子元素的float、clear和vertical-align属性将失效。
• flex