浏览器私有前缀 优雅降级 渐进增强 视口 二倍图 移动端布局

2020/01/05

浏览器私有前缀

• 各大浏览器私有前缀
  • -ms- 代表ie浏览器
  • -moz-代表firefox火狐浏览器
  • -o- 代表欧朋浏览器
  • -webkit- 代表Safari Chrome浏览器
• 后期会有自动化工具，帮助我们自动化添加 兼容性代码
• 优雅降级
  • 优先关注高级用户
  • 一开始构建站点完整功能
  • 针对一些低版本浏览器进行hack兼容
• 渐进增强
  • 优先关注基层用户
  • 一开始构建站点基本功能
  • 针对高级浏览器进行效果 交互追加功能 达到更好的体验

视口 （指一种情况 而不是具体的标签 980px）

• 布局视口 layout viewport
  • html标签固定在980px；
  • 手机浏览器强行缩放 pc端页面 ------980px的部分缩放到手机中；
  • 375px 装着 980宽度的 画面 就是布局视口 ；
• 视觉视口 viewport
  • 屏幕的区域
  • 用户屏幕宽度是多少 视觉视口就是多少；
• 理想视口 ideal viewport
  • 屏幕的宽度 和 跟标签的宽度 保持一致 就是理想视口；
  • 网页开发也是用这个；
  • 现在的网页 和 手机 开发者什么都不用管就已经是理想视口1:1；
    • 只要网页中添加；

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

  设置视口  
  	width宽度等于device-width设备屏幕宽；（1:1）
  	initial-scale 网页一打开 要放大的倍数 （一般不会放大）
  	maximum-scale 如果允许放大页面 最大放大倍数 （一般设置maximum-scale =1.0）
  	minimum-scale 如果允许缩小页面 最大缩小倍数 （一般设置minimum-scale =1.0）
  	user-scalable 用户缩放页面   不允许浏览器操作  （设置user-scalable=no）
  			允许用户缩放 但是是开发者使用js代码来控制 不是交给浏览器
  就是理想视口 （否则就是布局视口）；

二倍图

• 物理像素px 和 物理像素比dpr
  • pc端 1px等于1物理像素 ， 移动端 不尽相同
  • 一个px 能显示的物理像素点的个数 就称为物理像素比（屏幕像素比)
• 如何在代码中根据 不同清晰度的手机 加载 不同清晰度的图片
  1. 通过js解决 不推荐 （布局是css职责）
  2. 通过css
     1. 图片标签的srcset属性（现在不用了）
     2. 背景图片 image-set（现在不用了）

  <img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />
      

  background-image: image-set(
          url('./imgs/@2x/photo@2x.png') 2x,
          url('./imgs/@3x/photo@3x.png') 3x
  );

3. 面向百度编程 或 找大神
4. 现在二倍图 如何处理
   - 统一由美工切一张图片 高清的（2倍图或3倍图）	

移动端布局方式
流式布局 （百分比布局）
flex布局
vw + less布局
rem + less布局
rem + 淘宝flexible.js布局