怎么解决html5中rem适配与viewport适配问题?相关资料详解!
- 前端
- 猿友
- 0
我们在使用html5中的一些属性和控件的时候在遇到不同的浏览器中有存在着兼容的问题,那么今天我们就来讲讲有关于:“怎么解决html5中rem适配与viewport适配问题?”这个问题,下面是小编最近整理了部分相关内容希望对大家的困惑有所帮助!
H5 端 rem 适配方案与 viewport 适配
rem
rem 是 CSS3 新增的一个相对单位(root em,根 em)
只根据当前页面 HTML 页面的 font-size 设置,如果根目录的 font-size 为 18px,则 1rem=18px
媒体查询设置
@media screen and (min-width: 320px) {
html {
font-size: 32px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 37.5px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 41.4px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 75px;
}
}
使用 JS 动态修改
<script>
// 根据屏幕尺寸大小调整html的fontsize
function setHtmlFontSize() {
const width = document.documentElement.clientWidth;
document.documentElement.style.fontSize = width / 10 + "px";
}
// 初始化
setHtmlFontSize();
// 监听屏幕尺寸变化事件
window.addEventListener("resize", setHtmlFontSize);
// 监听屏幕翻转事件
window.addEventListener("orientationchange", setHtmlFontSize);
</script>
viewport
通过缩放来实现移动端各个尺寸的适配
适配方案 动态创建 mate viewport 属性,根据当前屏幕尺寸动态设置缩放值
Viewport 属性
使用 js 动态设置 viewport 属性
原理:通过设置 viewport 的 initial-scale 相关属性 , 将所有设备布局视口的宽度调整为设计图的宽度
//定义设计稿宽度为375
const DESIGN_WIDTH = 375;
//通过设置meta元素中content的initial-scale值达到移动端适配
const setViewport = function () {
//计算当前屏幕的宽度与设计稿比例
let scale = window.screen.width / DESIGN_WIDTH;
// 获取元素
let meta = document.querySelector("meta[name=viewport]");
let content = `width=${DESIGN_WIDTH}, initial-scale=${scale}, maximum-scale=${scale}, minimum-scale=${scale}`;
// 判断是否已存在
if (!meta) {
meta = document.createElement("meta");
meta.setAttribute("name", "viewport");
document.head.appendChild(meta);
}
meta.setAttribute("content", content);
};
setViewport();
// 监听屏幕变化事件
window.addEventListener("resize", setViewport);
// 监听屏幕翻转事件
window.addEventListener("orientationchange", setViewport);
以上就是有关于:“怎么解决html5中rem适配与viewport适配问题?”这部分内容分相关分享,更多有关于html5这方面的相关内容我们都可以在W3Cschool中进行学习和了解!
免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。