移动端布局实战教程.md

响应式布局

• 如果有一个页面，需要能在pc上正常适配，也能在移动端上适配，我们可以称之为响应式

• 代表：

  • http://expo.bootcss.com/
  • https://www.microsoft.com/zh-cn

• 原理：媒体查询

• 为什么响应式并不值得去推崇

  • 响应式是当时Pc端占主流市场下的一种妥协的技术,响应式的思路是先在pc端做好之后，再考虑在移动端通过媒体查询让某些标签隐藏或者改变样式，是一种以pc为主要考虑的思维方式，用一种方案来解决两个问题，注定了性能会十分的低下，现在是移动端的时代，大部分的新创公司对pc端基本上不太重视
  • 刚成立的公司，快速制作一个官网，等以后有钱了，肯定还是会pc端一套，移动端一套，分开写
  • 用"廉价"的bootstrap搭建而成，一个只会php,java的技术人员只要理解了栅格式的原理，照着文档就像搭建积木一样就能写出来一个页面
  • 拉勾网上并没有多少招聘信息刻意强调会bootstrap,会响应式
  • 响应式在国内基本上没有推广开
  • 一般需要给客户看的网站，不大可能用响应式，因为响应式的页面不能做一些很复杂的效果(为什么淘宝官网不用响应式)
  • 只有公司内部项目考虑用bootstrap的可能性大一些

移动端布局

布局思路

为什么移动端布局如此混乱

• css这套技术系统本身十分的混乱，基本上可以说毫无规律可言，依赖于技术人员的熟练程度而不是逻辑更多一些
• css历经了多个时代的升级，每一次升级之后，新的技术标准和旧的基本上没有任何关联
  • table布局
  • div+css布局
  • flex布局
  • grid布局
• 手机终端市场的混乱
  • 各种尺寸的手机
  • 由iphone的retina技术带来的dpr的混乱

基本概念的理解

物理设备像素

思考：为什么手电筒只能发出一种颜色的光，而我们的屏幕能发出这么多种颜色的光? 因为我们的屏幕是由无数个小的手电筒组成的，每个点可以发不同的颜色的光，最后就组成了我们看到的彩色的效果。 https://baike.baidu.com/pic/%E4%BD%8D%E5%9B%BE/1017781/0/b03533fa828ba61e23dfd8614034970a304e594e?fr=lemma&ct=single#aid=0&pic=b03533fa828ba61e23dfd8614034970a304e594e 每张图片都是由色点组成的，每个色点称为一个像素。一张图片由30万个色点组成，这个图片的像素就是30W。我们常说相机是多少像素，这个像素就是说这款照相机的感器件有多少个，有100W个感光器件的相机就是100W像素的相机，有4000W个感光器件的相机就是4000W像素，以此类推。一台100W像素的相机拍摄的照片洗成5寸的照片会比洗成6寸清晰一点。

屏幕分辨率

屏幕分辨率是屏幕每行的像素点数*每列的像素点数，每个屏幕有自己的分辨率。屏幕分辨率越高，所呈现的色彩越多，清晰度越高。

结论：

1. 像素的单位本质上是：个数，100像素你可以理解成你有100个手电筒
2. 同样大小(比如1cm*1cm大小的矩形)，里面的像素越多，画面越清晰

css像素

• 在pc端1css像素相当于1物理设备像素
• 试验：缩放网页，观察你写的1px会变大变小

思考

我们的手机分辨率是640