移动端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 相关文章推荐
网页布局中CSS样式无效的十个重要原因详解
Aug 10 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
css3 transform及原生js实现鼠标拖动3D立方体旋转
Jun 20 HTML / CSS
css3动画效果小结(推荐)
Jul 25 HTML / CSS
HTML5 progress和meter控件_动力节点Java学院整理
Jul 06 HTML / CSS
canvas学习笔记之绘制简单路径
Jan 28 HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 HTML / CSS
html5响应式开发自动计算fontSize的方法
Jan 13 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
table不让td文字溢出操作方法
Dec 24 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
mysql5写入和读出乱码解决
2006/11/25 PHP
PHP 出现乱码和Sessions验证问题的解决方法!
2008/12/06 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
PHP关于IE下的iframe跨域导致session丢失问题解决方法
2013/10/10 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
php截取视频指定帧为图片
2016/05/16 PHP
Yii 2.0实现联表查询加搜索分页的方法示例
2017/08/02 PHP
利用Laravel生成Gravatar头像地址的优雅方法
2017/12/30 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
PHP7中I/O模型内核剖析详解
2019/04/14 PHP
仅img元素创建后不添加到文档中会执行onload事件的解决方法
2011/07/31 Javascript
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
瀑布流布局代码一例
2014/04/11 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
vue的一个分页组件的示例代码
2017/12/25 Javascript
解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题
2018/08/24 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
js实现烟花特效
2020/03/02 Javascript
vue 实现根据data中的属性值来设置不同的样式
2020/08/04 Javascript
python 环境变量和import模块导入方法(详解)
2017/07/11 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
pandas中apply和transform方法的性能比较及区别介绍
2018/10/30 Python
python3.7 的新特性详解
2019/07/25 Python
如何关掉pycharm中的python console(图解)
2019/10/31 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
python tkinter实现下载进度条及抖音视频去水印原理
2021/02/07 Python
计算机专业大学生的自我评价
2013/11/14 职场文书
个人工作年终总结
2015/03/09 职场文书
《家庭教育》读后感3篇
2019/12/18 职场文书
php 防护xss,PHP的防御XSS注入的终极解决方案
2021/04/01 PHP
Tomcat配置访问日志和线程数
2022/05/06 Servers
SQL Server中的游标介绍
2022/05/20 SQL Server
Spring IOC容器Bean的作用域及生命周期实例
2022/05/30 Java/Android