前缀 优雅降级 渐进增强 视口 二倍图 移动端布局"/>
浏览器私有前缀 优雅降级 渐进增强 视口 二倍图 移动端布局
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 能显示的物理像素点的个数 就称为物理像素比(屏幕像素比)
- 如何在代码中根据 不同清晰度的手机 加载 不同清晰度的图片
- 通过js解决 不推荐 (布局是css职责)
- 通过css
- 图片标签的srcset属性(现在不用了)
- 背景图片 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布局
更多推荐
浏览器私有前缀 优雅降级 渐进增强 视口 二倍图 移动端布局
发布评论