cvmachine.com - 申博开户网

搜索: 您的位置主页 > 网络频道 > 阅读资讯:实现移动端rem布局的步骤

实现移动端rem布局的步骤

2018-01-07 08:13:32 来源:www.cvmachine.com 【

实现移动端rem布局的步骤

据了解,现在有两种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的方法,面对不同尺寸的移动端设备,都能实现文字大小等尺寸的细微变化。


本文地址:http://www.cvmachine.com/a/question/95663.html
Tags: 布局 rem 移动
编辑:申博开户网
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部
m88.com m88 vwin 188bet uedbet 威廉希尔 vwin 明升 bwin 明升88 bodog bwin 明升m88.com m88 18luck 188bet 博狗 澳门金沙 澳门彩票 unibet unibet Ladbrokes Ladbrokes 12bet 真钱的棋牌游戏 皇冠娱乐 casino casino m88明升 明升88 明升 明升 明升 m88.com m88.com