HTML5中 rem适配方案与 viewport 适配问题详解


Posted in HTML / CSS onApril 27, 2021

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 属性

 

属性 说明 备注
width 以 px 为单位定义 viewport 的宽度 一个正整数或者额字符串 device-width
height 以 px 为单位定义 viewport 的高度 一个正整数或者额字符串 device-height
initial-scale 定义设备的 dips 宽度与 viewport 尺寸之间的比例 一个 0.0 到 10.0 之间的正数
maximum-scale 定义最大缩放值,他的值必需大于等于 minimum-scale 的值 一个 0.0 到 10.0 之间的正数
minimum-scale 定义最小缩放值,他的值必需小于等于 maximum-scale 的值 一个 0.0 到 10.0 之间的正数
user-scalable 一个布尔值,用户是否可以缩放页面 yes 或 no

使用 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 rem适配内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

 
HTML / CSS 相关文章推荐
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
使用CSS3来制作消息提醒框
Jul 12 HTML / CSS
使用CSS3制作一个简单的Chrome模拟器
Jul 15 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
HTML5注册页面示例代码
Mar 27 HTML / CSS
HTML块级标签汇总(小篇)
Jul 13 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
巧用 -webkit-box-reflect 倒影实现各类动效(小结)
Apr 22 HTML / CSS
HTML中实现音乐或视频自动播放案例详解
May 30 HTML / CSS
CSS 还能这样玩?奇思妙想渐变的艺术
css3 实现文字闪烁效果的三种方式示例代码
Css预编语言及区别详解
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 #HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
六种css3实现的边框过渡效果
Apr 22 #HTML / CSS
HTML+CSS+JS实现图片的瀑布流布局的示例代码
You might like
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
linux系统上支持php的 iconv()函数的方法
2011/10/01 PHP
PHP英文字母大小写转换函数小结
2014/05/03 PHP
PHP计算当前坐标3公里内4个角落的最大最小经纬度实例
2016/02/26 PHP
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
javascript实现表单提交后,提交按钮不可用的方法
2015/04/18 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
BetterScroll 在移动端滚动场景的应用
2017/09/18 Javascript
Vue仿微信app页面跳转动画效果
2019/08/21 Javascript
小程序实现上下移动切换位置
2019/09/23 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python使用回溯法子集树模板获取最长公共子序列(LCS)的方法
2017/09/08 Python
基于python的图片修复程序(实现水印去除)
2018/06/04 Python
PyQt5 QListWidget选择多项并返回的实例
2019/06/17 Python
python数组循环处理方法
2019/08/26 Python
python实现简单猜单词游戏
2020/12/24 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
学生安全教育材料
2014/02/14 职场文书
给孩子的新年寄语
2014/04/08 职场文书
村庄绿化方案
2014/05/07 职场文书
公务员个人年终总结
2015/02/12 职场文书
总经理司机岗位职责
2015/04/10 职场文书
创业项目大全(适合在家创业的项目)
2019/08/15 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏
Golang Elasticsearches 批量修改查询及发送MQ
2022/04/19 Golang