• 移动端rem布局


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

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

     1 @media only screen and (max- 600px), only screen and (max-device-400px) {
     2   html,body {
     3     font-size:50px;
     4   }
     5 }
     6 @media only screen and (max- 500px), only screen and (max-device-400px) {
     7   html,body {
     8     font-size:40px;
     9   }
    10 }
    11 @media only screen and (max- 400px), only screen and (max-device-300px) {
    12   html,body {
    13     font-size:30px;
    14   }
    15 }
    16 .box{
    17   border: 1rem solid #000;
    18   font-size: 1rem;
    19 }

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

    方法二:引入js

     1 // 需求:根据设计图的比例去动态设置不同屏幕下面对应的font-size值
     2 // 这段JS不要添加入口函数,并且引用的时候放到最前面
     3 // ui的大小根据自己的需求去改
     4 
     5 // 设计图的宽度
     6 var ui = 750;
     7 // 自己设定的font值
     8 var font = 40;
     9 // 得到比例值
    10 var ratio = ui/font;
    11 var oHtml = document.documentElement;
    12 var screenWidth = oHtml.offsetWidth;
    13 // 初始的时候调用一次
    14 getSize();
    15 
    16 window.addEventListener('resize', getSize);
    17 // 在resize的时候动态设置fontsize值
    18 function getSize(){
    19   screenWidth = oHtml.offsetWidth;
    20   // 限制区间
    21   if(screenWidth <= 320){
    22     screenWidth = 320;
    23   }else if(screenWidth >= ui){
    24     screenWidth = ui;
    25   }
    26   oHtml.style.fontSize = screenWidth/ratio + 'px';
    27 }

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

  • 相关阅读:
    TP5 中通过Request获取到的 Action不同的环境,大小写不一样
    正则符号
    ubuntu mysql卸载重装
    ubuntu 多域名配置
    微信小程序-开发入门(一)
    Maven通过profiles多环境配置打包
    GitLab多机备份与恢复操作
    动态增加linux目录大小
    MQ队列及常见操作
    ②将SVN迁移到GitLab-多分支多标签迁移
  • 原文地址:https://www.cnblogs.com/xiaoyaoxingchen/p/8176337.html
走看看 - 开发者的网上家园