>>分享Web前端开发技术,并对孙卫琴的《精通Vue.js:Web前端开发技术详解》提供技术支持 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 19945 个阅读者 刷新本主题
 * 贴子主题:  一看就懂得移动端rem布局、rem如何换算 回复文章 点赞(0)  收藏  
作者:Jacky    发表时间:2020-03-30 18:03:23     消息  查看  搜索  好友  邮件  复制  引用

                                    

一看就懂得移动端rem布局、rem如何换算

              这里使用了js控制根元素的font-size大小,然后进行rem换算,在js代码后面会说明以下问题。

         1.如何进行rem运算?

         2.如果纯js控制根元素用rem布局会出现的小问题,如何解决?

         3.如有欠缺的地方,大神们可以指出错误或者改进。

function  intiSize(){

// 获取当前浏览器窗口宽度(这里的实质就是body宽度)

var win_w= document.body.offsetWidth;

// 定义变量

var  fontSize;

if(win_w>640 ){

fontSize=24 ;

} else {

// 如果浏览器窗口宽度(这里的实质就是body宽度)值小于320,取320

win_w=Math.max(320 ,win_w);

fontSize=win_w/320*12

  }

// 设置根元素的大小

document.getElementsByTagName('html')[0].style.fontSize=fontSize+'px' ;

}

// 浏览器窗口宽度发生变化时条用这个函数,方便与改变窗口大小时候调试

onresize= intiSize;

intiSize();

          1.这段代码是基于640px的设计稿,基于640设计说明(明白了640怎么换算,720设计稿原理一样,替换以下JS代码里面的数字或者用传参的方式调用函数)

         假设我们拿到一张640的设计稿,有一个div宽度为200px,高度100px;你在640的页面去布局时,因为根元素取24px,把width值转换为rem可以直接用设计稿div的宽度除以24,200/24rem=8.33333333rem(当然是除不尽的,精确度建议保留8个小数点),而同理,高度height=100/24rem=4.16666667rem,这样布局可以很精确还原设计稿,当然最后推荐使用计算器。

         2.纯js控制会一个页面加载时候,知道加载完毕会出现由大变小的问题,这个是因为先加载页面然后再加载js,当没加载完这段js,函数没被调用,会出现很大字体或者图片很大,等JS加载完毕后,瞬间变回正常,这样会影响用户体验,这里有两个解决方法,

         一、像淘宝移动端那样,页面没加载完毕前显示一个loading页面,加载完毕后再显示内容。

         二、把加入一个css媒体查询样式表,页面先加载样式再加载内容,用css样式表去控制你的页面布局和js精确控制的布局偏差尽量降低到最小,这样加载完时候因为微小偏差的还原到精确的布局,这时候发生的变化非常微小(只有一个px左右的偏差)肉眼很难以看出(亲测实用),下面我贴出平时实用的css样式表,两张混合实用,移动端布局的问题得以完美的解决。


@charset "utf-8";

/*  CSS Document  */

/*  ---------- Responsive accurate ----------  */

@media (min-width:640px){

   html{font-size: 24px;}

}

@media (min-width:631px) and (max-width:639px){ html{font-size: 23.66px;} }

@media (min-width:622px) and (max-width:630px){ html{font-size: 23.33px;} }

@media (min-width:613px) and (max-width:621px){ html{font-size: 23px;} }

@media (min-width:604px) and (max-width:612px){ html{font-size: 22.66px;} }

@media (min-width:595px) and (max-width:603px){ html{font-size: 22.33px;} }

@media (min-width:586px) and (max-width:594px){ html{font-size: 22px;} }

@media (min-width:577px) and (max-width:585px){ html{font-size: 21.66px;} }

@media (min-width:568px) and (max-width:576px){ html{font-size: 21.33px;} }

@media (min-width:559px) and (max-width:567px){ html{font-size: 21px;} }

@media (min-width:550px) and (max-width:558px){ html{font-size: 20.66px;} }

@media (min-width:541px) and (max-width:549px){ html{font-size: 20.33px;} }

@media (min-width:533px) and (max-width:540px){ html{font-size: 20px;} }

@media (min-width:524px) and (max-width:532px){ html{font-size: 19.66px;} }

@media (min-width:515px) and (max-width:523px){ html{font-size: 19.33px;} }

@media (min-width:506px) and (max-width:514px){ html{font-size: 19px;} }

@media (min-width:497px) and (max-width:505px){ html{font-size: 18.66px;} }

@media (min-width:488px) and (max-width:496px){ html{font-size: 18.33px;} }

@media (min-width:480px) and (max-width:487px){ html{font-size: 18px;} }

@media (min-width:471px) and (max-width:479px){ html{font-size: 17.66px;} }

@media (min-width:462px) and (max-width:470px){ html{font-size: 17.33px;} }

@media (min-width:453px) and (max-width:461px){ html{font-size: 17px;} }

@media (min-width:444px) and (max-width:452px){ html{font-size: 16.66px;} }

@media (min-width:435px) and (max-width:443px){ html{font-size: 16.33px;} }

@media (min-width:426px) and (max-width:434px){ html{font-size: 16px;} }

@media (min-width:417px) and (max-width:425px){ html{font-size: 15.66px;} }

@media (min-width:408px) and (max-width:416px){ html{font-size: 15.33px;} }

@media (min-width:400px) and (max-width:407px){ html{font-size: 15px;} }

@media (min-width:391px) and (max-width:399px){ html{font-size: 14.66px;} }

@media (min-width:382px) and (max-width:390px){ html{font-size: 14.33px;} }

@media (min-width:374px) and (max-width:381px){ html{font-size: 14px;} }

@media (min-width:365px) and (max-width:373px){ html{font-size: 13.66px;} }

@media (min-width:356px) and (max-width:364px){ html{font-size: 13.33px;} }

@media (min-width:347px) and (max-width:355px){ html{font-size: 13px;} }

@media (min-width:338px) and (max-width:346px){ html{font-size: 12.66px;} }

@media (min-width:329px) and (max-width:337px){ html{font-size: 12.44px;} }

@media (max-width:328px){ html{font-size: 12px;} }

        3.如果有更加多好的想法和建议,留下你的评论,让更加多人看到移动端布局应该怎么去改进,指出不足之处,我会加以改进并说明~

         4.最后:或者这里换算有些麻烦,要用计算机器去计算,当然,当你掌握了这种布局方式,移动布局会用的很爽!

                  
----------------------------
原文链接:https://www.cnblogs.com/daysme/p/6511787.html

程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 flybird 在 2020-03-30 18:03:23 重新编辑]
  Java面向对象编程-->操作符
  JavaWeb开发-->JSP技术详解(Ⅰ)
  JSP与Hibernate开发-->通过JPA API检索数据
  Java网络编程-->用Spring整合CXF发布Web服务
  精通Spring-->绑定表单
  Vue3开发-->创建综合购物网站应用
  好消息:《精通Vue.js:Web前端开发技术详解》出版了!
  常用CSS样式属性大全
  qs.parse()、qs.stringify()、JSON.stringify() 用法及区别
  vue3-Composition-API的用法
  vue3 composition API的用法
  JS中==和===的区别
  加快 Vue 项目的开发速度
  Vue路由开启keep-alive时的注意点
  JS对树形数据的遍历和过滤,
  Javascript DOM封装方法汇总
  CSS Border(边框)
  JavaScript 函数定义
  JavaScript prototype(原型对象)
  JavaScript中的 this关键字
  Android 广播接收器(Broadcast Receivers)
  更多...
 IPIP: 已设置保密
树形列表:   
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。