使用了js控制根元素的font-size大小,然后进行rem换算
来源:互联网 发布:硕士毕业论文 知乎 编辑:程序博客网 时间:2024/05/17 22:59
这里使用了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.最后:或者这里换算有些麻烦,要用计算机器去计算,当然,当你掌握了这种布局方式,移动布局会用的很爽!
- 使用了js控制根元素的font-size大小,然后进行rem换算
- js控制根元素的font-size大小
- js+rem动态计算font-size的大小,适配各种手机设备
- 建议Font-Size使用em单位控制大小
- 移动端设置html的font-size从而设置rem的大小
- CSS font-size: em&rem
- 移动前端自适应解决方案(rem font-size)
- Q:使用font-size:0 来去掉元素之间的空隙或错位的方法
- 使用font-size:0 来去掉inline-block元素之间的空隙
- CSS Font-Size: em、px 、pt 、Percent之间的关系及换算
- CSS Font-Size: em、px 、pt 、Percent之间的关系及换算
- mobile webiste 中的css的font-size em及line-height等换算
- font-size使用em
- font-size: 0;解决inline元素间的空白间隙
- rem使用的js代码
- 翻译:CSS3用rem来设置font-size
- rem为所有屏幕设置初始font-size
- 根据font-size计算rem尺寸,动态缩放页面
- Mac环境下配置andrion环境变量-RectNative引发的问题
- Linux常用命令(二)
- CDC::GetDeviceCaps()物理长度与屏幕像素间的转换
- 莫比乌斯函数摘录笔记
- 输出全部的希腊字母(作业)
- 使用了js控制根元素的font-size大小,然后进行rem换算
- 最优服务次序问题(贪心)
- JavaScript 自定义封装XMLHttpRequest
- 机器学习基本概念
- c语言 两字符串交叉合并
- C语言对图片进行base64编码
- 关于VERIFY_OCTAL_PERMISSIONS权限检查
- 观察者模式应用在Gridview、Adapter原理解析
- linux学习---常用时间函数