欢迎大家来到IT世界,在知识的湖畔探索吧!
为什么需要适配
屏幕.png
- 设计稿 375
- 不同手机不同物理分辨率
- 不能自适应
尺寸
屏幕尺寸是以屏幕的「对角线」来计量,单位是英寸
尺寸.png
名称 定义 单位 像素 为组成一幅图像的全部亮度和色度的最小图像单元 Pel,pixel;pictureelement 分辨率 指纵横向上的像素点数 px 设备像素 物理分辨率越大,图像缩小 p 设备独立像素 视网膜屏幕,2×2个像素当1个像素 Retina Display 设备像素比 物理像素和设备独立像素的比值 dpr(device pixel ratio)
1px 边框问题
❝❞
- 每个设备的屏幕设备尺寸不一样,就导致每个物理像素渲染出来的大小也不同(设备的像素大小是不固定的)
- 当我们写 css 中的 1px 时候,由于它是逻辑像素,导致我们的逻辑像素根据这个设备像素比(dpr)去映射到设备上就为 2px,或者 3px。
transform: scale(.5) 方案
div {
height:1px;
background:#000;
-webkit-transform: scaleY(0.5);
-webkit-transform-origin:0 0;
overflow: hidden;
}
欢迎大家来到IT世界,在知识的湖畔探索吧!
css 根据设备像素比媒体查询后的解决方案
欢迎大家来到IT世界,在知识的湖畔探索吧!/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
如何适配
viewport
- 视口(viewport)代表当前可见计算机图形区域
- 你正在浏览文档的那一部分
配置视口
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;">
含义
属性 含义 取值 width 定义视口的宽度,单位为像素 正整数或device-width heigit 定义视口的高度,单位为像素 正整数或device-height initial-scale 定义初始缩放值 整数或小数 minimum-scale 缩小最小比例,必须小于或等于maximum-scale 整数或小数 maximum-scale 放大最大比例,必须大于或等于minimum-scale 整数或小数 user-scalable 是否允许用户手动缩放页面 yes/no 默认值 yes
规定了我们的视口宽度为屏幕宽带,初始缩放比例为 1,就是初始时候视觉视口就是理想视口
「user-scalable 设置为 no 可以解决移动端点击事件延迟问题」 **
rem 适配
- rem 是 css3 新增的一个相对单位
- 相对 「HTML」 根元素设定字体大小
- em 相对 **父级元素 **设定字体大小
欢迎大家来到IT世界,在知识的湖畔探索吧!html {
font-size: 20px;
}
/* 相对根元素20px像素 */
span {
font-size: 1rem;
}
淘宝 flexible
淘宝使用的过渡方案,在页面初始时给根元素动态设置一个 font-size,接下来元素根据 rem 来布局
// set 1rem = viewWidth / 10
function setRemUnit () {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit();
**注意:**用户使用更大的屏幕,是想看到更多的内容,而不是更大的字
vw,vh 布局
vh vw方案:将视觉视口宽度 window.innerWidth 和视觉视口高度 window.innerHeight 等分 100 份
px转换成 vw 不一定能完全整除,因此有一定像素差
postcss-px-to-viewport 方案转换
{
loader: 'postcss-loader',
options: {
plugins: ()=>[
require('autoprefixer')({
browsers: ['last 5 versions']
}),
require('postcss-px-to-viewport')({
viewportWidth: 375, // 视口宽度(数字)
viewportHeight: 1334, // 视口高度(数字)
unitPrecision: 3, // 设置的保留小数位数(数字)
viewportUnit: 'vw', // 设置要转换的单位(字符串)
selectorBlackList: ['.ignore', '.hairlines'], // 不需要进行转换的类名(数组)
minPixelValue: 1, // 设置要替换的最小像素值(数字)
mediaQuery: false // 允许在媒体查询中转换px(true/false)
})
]
}
适配流程
「px 为主,vh,vw 为辅,搭配一些 flex」
- 在 head 设置 width=device-width 的 viewport
- 在 css 中使用 px
- 在适当场景中使用 flex 布局,或者配合 vw 进行自适应
- 在跨设备类型的时候(px < = > 手机 <=>平板) 使用媒体查询
- 在跨设备类型如果交互差异太大的情况,考虑分开项目开发
「参考:」 面试官:你了解过移动端适配吗? 移动端适配总结
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/30392.html