900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > 移动端rem布局与高清屏幕适配

移动端rem布局与高清屏幕适配

时间:2023-03-15 21:31:13

相关推荐

移动端rem布局与高清屏幕适配

移动端视口在没设置情况下是980

document.documentElement.clientWidthwindow.screen复制代码

逻辑像素和物理像素

拿iphone4为例,横向逻辑像素为320个,横向物理像素有640个,所以window.devicePixelRatio = 2, 就是2倍屏复制代码

meta标签

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no">复制代码

移动端1px 解决方案

.radius-border{position: relative;}@media screen and (-webkit-min-device-pixel-ratio: 2){.radius-border:before{content: "";pointer-events: none; /* 防止点击触发 */box-sizing: border-box;position: absolute;width: 200%;height: 200%;left: 0;top: 0;border-radius: 8px;border:1px solid #999;-webkit-transform(scale(0.5));-webkit-transform-origin: 0 0;transform(scale(0.5));transform-origin: 0 0;}}复制代码

flexible.js不要写meta标签,自己会生成

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。