01移动端布局基础之流式布局

技术交流QQ群:1027579432，欢迎你的加入！

1.移动端基础

• 浏览器现状
  • PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器等。
    移动端常见浏览器：UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器等。
• 国内的UC、QQ、百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于安卓修改开发的一样。
• 总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。
• 手机屏幕现状
  • 移动端设备屏幕尺寸非常多，碎片化严重；
  • Android设备有多种分辨率：480*480、480*854、720*1280、1080*1920等；
  • 作为开发者无需关注这些分辨率，因为常用的尺寸单位是px；
• 常见移动端屏幕尺寸
  
• 移动端调试方法
  • Chrome DevTools(谷歌浏览器)的模拟手机调试；
  • 搭建本地web服务器，手机和服务器在一个局域网内，通过手机访问服务器；
  • 使用外网服务器，直接IP或域名访问；

2.视口

• 视口：浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口、理想视口。
• 布局视口layout viewport
  
  • 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期PC端页面在手机上显示的问题；
  • IOS、Android基本都将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页；
• 视觉视口visual viewport
  
  • 它是用户正在看到的网站的区域。注意：是网站的区域；
  • 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍然保持原来的宽度；
• 理想视口ideal viewport
  • 为了使网站能在移动端有最理想的浏览和阅读宽度而设定；
  • 理想视口，对设备来说，是最理论的视口尺寸；
  • 需要手动添加meta视口标签通知浏览器操作；
  • meta视口标签主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，布局视口就要有多宽。

3.meta视口标签

• 语法格式：

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

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

4.二倍图

• 物理像素和物理像素比
  • 物理像素指的是屏幕显示的最小颗粒，是物理中真实存在的。这是厂商在出厂时就设置好了。例如苹果手机的750*1334；
  • 开发时的1px不是一定等于1个物理像素的；
  • PC端页面中，1px等于1个物理像素的，但是移动端就不尽相同；
  • 1px能显示的物理像素点的个数，称为物理像素比或屏幕像素比；

5.多倍图

• PC端和手机端的手机屏幕/普通手机屏幕：1CSS像素=1物理像素
• Retina(视网膜屏幕)是一种显示技术，可以把更多的物理像素点压缩至一块屏幕中，从而达到更高的分辨率，并提高屏幕显示的细腻程度。
  
• 对于一张50px*50px的图片，在手机Retina屏中打开，按照刚才的物理像素比会放大倍数，这样会造成图片模糊；
• 在标准的viewport设置中，使用倍图来提高图片的质量，解决在高清设备中的模糊问题；
• 通常使用二倍图，因为iphone8的影响，但是现在还存在3倍图、4倍图的情况，这个根据实际开发需求；
• 背景图片，注意缩放问题；

6.背景缩放background-size

• background-size属性规定了背景图像的尺寸；

• 语法格式：

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

• 单位：长度或百分比或cover或contain；

• cover把背景图像扩展足够大，从而使背景图像完全覆盖背景区域；
• contain把背景图像扩展到最大尺寸，从而使宽度和高度完全适应内容区域；
• 多倍图切图cutterman
  • @1*1倍图原图
  • @2*2倍图
  • @3*3倍图

7.移动端开发选择

• a.单独制作移动端页面(主流)：通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备，如果是移动设备打开，则跳动移动端页面。
  • 京东商城手机版
  • 淘宝触屏版
  • 苏宁易购手机版
• b.响应式页面兼容移动端(其次)：通过判断屏幕宽度改变样式，以适应不同终端。缺点：制作麻烦，需要花很多精力去调兼容性问题。
  • 三星手机官网

8.移动端技术解决方案

• 移动端浏览器
  • 移动端浏览器基本以webkit内核为主，因此就需要考虑webkit兼容性问题；
  • 可以放心使用H5标签和CSS3样式；
  • 同时，我们浏览器的私有前缀只需要考虑添加webkit即可；
• CSS样式初始化normalize.css
  • 移动端CSS初始化推荐使用normalize.css；

• CSS盒子模型box-sizing

  • 传统模式宽度计算：盒子的宽度 = CSS中设置的width + border + padding；

  • CSS3盒子模型：盒子的宽度 = CSS中设置的宽度width里面包含了border和padding。即CSS3中的盒子模型，padding和border不会撑大盒子；

    <!-- CSS3盒子模型 -->
    box-sizing: border-box;
    <!-- 传统盒子模型 -->
    box-sizing: content-box;

  • 移动端可以全部使用CSS3盒子模型；

  • PC端如果完全需要兼容，就使用传统盒子模型；如果不考虑兼容性，就选择CSS3盒子模型；

9.特殊样式

<!-- CSS盒子模型 -->
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;}

10.移动端常见布局

• 移动端布局和PC端有所区别：
  • a.单独制作移动端页面(主流)
    • 流式布局(百分比布局)
    • flex弹性布局(强烈推荐)
    • less+rem+媒体查询布局
    • 混合布局
  • b.响应式页面兼容移动端(其次)
    • 媒体查询
    • bootstarp

11.移动端布局之流式布局

• 流式布局，就是百分比布局，也称为非固定像素布局；
• 通过盒子的宽度设置成百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充；
• 流式布局方式是移动web开发中使用的比较常见的布局方式；
• max-width 最大宽度(max-height 最大高度)
• min-width 最小宽度 (min-height 最小高度)

12.资料下载

• 笔记及代码，欢迎star,follow,fork……