移动端rem布局的两种实现方法


Posted in HTML / CSS onJanuary 03, 2018

据了解,现在有两种rem布局的样式控制,其中一种是通过css的媒体查询,另外一种是通过引入js来控制,这两种方法各有各的优点,但是我还是喜欢用引入js的方法来实现rem布局,尽管现在市面上大多数都在使用css媒体查询的方式实现,在此我就将这两种方法做一总结:

方法一:常用方法,css媒体查询

@media only screen and (max-width: 600px), only screen and (max-device-width:400px) {
  html,body {
    font-size:50px;
  }
}
@media only screen and (max-width: 500px), only screen and (max-device-width:400px) {
  html,body {
    font-size:40px;
  }
}
@media only screen and (max-width: 400px), only screen and (max-device-width:300px) {
  html,body {
    font-size:30px;
  }
}
.box{
  border: 1rem solid #000;
  font-size: 1rem;
}

对于这种方法而言,他仅仅通过css文件就可以实现,在加载页面的过程中,请求的文件较少,但是如果使用的两个移动端设备屏幕宽度相差不大,都在媒体查询所设置的同一区间,那么页面中的文字大小等不会变化,可是使用引入js的方法就不一样了。

方法二:引入js

// 需求:根据设计图的比例去动态设置不同屏幕下面对应的font-size值
// 这段JS不要添加入口函数,并且引用的时候放到最前面
// ui的大小根据自己的需求去改
// 设计图的宽度
var ui = 750;
// 自己设定的font值
var font = 40;
// 得到比例值
var ratio = ui/font;
var oHtml = document.documentElement;
var screenWidth = oHtml.offsetWidth;
// 初始的时候调用一次
getSize();
window.addEventListener('resize', getSize);
// 在resize的时候动态设置fontsize值
function getSize(){
  screenWidth = oHtml.offsetWidth;
  // 限制区间
  if(screenWidth <= 320){
    screenWidth = 320;
  }else if(screenWidth >= ui){
    screenWidth = ui;
  }
  oHtml.style.fontSize = screenWidth/ratio + 'px';
}

这种通过引入js的方法,面对不同尺寸的移动端设备,都能实现文字大小等尺寸的细微变化。

HTML / CSS 相关文章推荐
详解css3 object-fit属性
Jul 27 HTML / CSS
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
CSS3 实现发光边框特效
Nov 11 HTML / CSS
浅谈HTML5新增及移除的元素
Jun 27 HTML / CSS
html5 canvas 画图教程案例分析
Nov 23 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
Html5页面获取微信公众号的openid的方法
May 12 HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 #HTML / CSS
css3动画过渡实现鼠标跟随导航效果
Feb 08 #HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 #HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 #HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 #HTML / CSS
CSS3截取字符串实例代码【推荐】
Jun 07 #HTML / CSS
CSS3地图动态实例代码(圆圈向外扩散)
Jun 15 #HTML / CSS
You might like
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php观察者模式应用场景实例详解
2017/02/03 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
jQuery循环滚动展示代码 可应用到文字和图片上
2012/05/11 Javascript
javascript中的this详解
2014/12/08 Javascript
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
2016/04/01 Javascript
基于BootStrap Metronic开发框架经验小结【一】框架总览及菜单模块的处理
2016/05/12 Javascript
详解node中创建服务进程
2017/05/09 Javascript
jQuery+Ajax实现用户名重名实时检测
2017/06/01 jQuery
bootstrap paginator分页前后台用法示例
2017/06/17 Javascript
微信小程序 检查接口状态实例详解
2017/06/23 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
Koa 使用小技巧(小结)
2018/10/22 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Django中Forms的使用代码解析
2018/02/10 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
python实现从文件中读取数据并绘制成 x y 轴图形的方法
2018/10/14 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Pytorch 使用CNN图像分类的实现
2020/06/16 Python
selenium+headless chrome爬虫的实现示例
2021/01/08 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
python SOCKET编程基础入门
2021/02/27 Python
CSS3弹性盒模型开发笔记(二)
2016/04/26 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
电子商务个人职业生涯规划范文
2014/02/12 职场文书
社团2014年植树节活动总结
2014/03/11 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
办公室岗位职责范本
2015/04/11 职场文书