移动端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 3D位移translate效果实例介绍
May 03 HTML / CSS
CSS3 边框效果
Nov 04 HTML / CSS
CSS3 实现时间轴动画
Nov 25 HTML / CSS
深入研究HTML5实现图片压缩上传功能
Mar 25 HTML / CSS
Html5 语法与规则简要概述
Jul 29 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
canvas小画板之平滑曲线的实现
Aug 12 HTML / CSS
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
Oct 16 HTML / CSS
CSS作用域(样式分割)的使用汇总
Nov 07 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
Oracle Faq(Oracle的版本)
2006/10/09 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
php curl_init函数用法
2014/01/31 PHP
php中heredoc与nowdoc介绍
2014/12/25 PHP
JavaScript strike方法入门实例(给字符串加上删除线)
2014/10/17 Javascript
JS实现简单的键盘打字的效果
2015/04/24 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
json的使用小结
2016/06/08 Javascript
jQuery实现可拖拽的许愿墙效果【附demo源码下载】
2016/09/14 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
解决JQuery全选/反选第二次失效的问题
2017/10/11 jQuery
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
[00:59]DOTA2背景故事第二期之四大基本法则
2020/07/07 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
深入浅析Python字符编码
2015/11/12 Python
Python脚本获取操作系统版本信息
2016/12/17 Python
python生成式的send()方法(详解)
2017/05/08 Python
Python编程把二叉树打印成多行代码
2018/01/04 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
python3.6 如何将list存入txt后再读出list的方法
2019/07/02 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
Python Numpy 控制台完全输出ndarray的实现
2020/02/19 Python
python logging 重复写日志问题解决办法详解
2020/08/04 Python
python实现单机五子棋
2020/08/28 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
利用CSS3实现自定义滚动条代码分享
2016/08/18 HTML / CSS
HTML5探秘:用requestAnimationFrame优化Web动画
2018/06/03 HTML / CSS
自荐信封面
2013/12/04 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Python中基础数据类型 set集合知识点总结
2021/08/02 Python