浅谈pc端rem字体设置的问题


Posted in Javascript onAugust 03, 2017

1、内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常

2、长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.此时BODY的FONT-SIZE设置为正常值,12PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大。

3、当浏览器窗口变化时,内容的大小以及相对位置也会相应变化,这个依靠JS修改HTML的FONT-SIZE值实现.如下:

$(window).resize(function ()// 绑定到窗口的这个事件中
{
 var whdef = 100/1920;// 表示1920的设计图,使用100PX的默认值
 var wH = window.innerHeight;// 当前窗口的高度
 var wW = window.innerWidth;// 当前窗口的宽度
 var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
 $('html').css('font-size', rem + "px");
});

如果调整窗口大小,会发现HTML的FONT-SIZE值在变化,同时,使用REM设置的DOM也在变化。REM正是参考HTML的FONT-SIZE值来计算的

4、如果是在手机上,平板电脑上,更要使用REM,由于手机上一般不会调整浏览器大小,所以可以在页面载入时,设置一次即可

$(function(){

 var whdef = 50/750;// 表示750的设计图,使用50PX的默认值
 var wH = window.innerHeight;// 手机窗口的高度
 var wW = window.innerWidth;// 手机窗口的宽度
 var rem = wW * whdef;// 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值
 $('html').css('font-size', rem + "px");

})

以上这篇浅谈pc端rem字体设置的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript获取地址栏参数
Dec 22 Javascript
动态添加js事件实现代码
Mar 12 Javascript
javascript调试说明
Jun 07 Javascript
推荐6款基于jQuery实现图片效果插件
Dec 07 Javascript
基于JavaScript实现TAB标签效果
Jan 12 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
jQuery动态移除和添加背景图片的方法详解
Mar 07 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
javascript数组的定义及操作实例
Nov 10 Javascript
JavaScript数组及常见操作方法小结
Nov 13 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 #Javascript
promise处理多个相互依赖的异步请求(实例讲解)
Aug 03 #Javascript
老生常谈js数据类型
Aug 03 #Javascript
详解JavaScript按概率随机生成事件
Aug 02 #Javascript
angular中的cookie读写方法
Aug 02 #Javascript
webpack进阶——缓存与独立打包的用法
Aug 02 #Javascript
使用vue构建移动应用实战代码
Aug 02 #Javascript
You might like
使用无限生命期Session的方法
2006/10/09 PHP
修改php.ini不生效问题解决方法(上传大于8M的文件)
2013/06/14 PHP
PHP程序员基本要求和必备技能
2014/05/09 PHP
PHP入门之常量简介和系统常量
2014/05/12 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
php生成zip文件类实例
2015/04/07 PHP
php防止用户重复提交表单
2015/11/02 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP文件后缀不强制为.php方法
2019/03/31 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
js随机颜色代码的多种实现方式
2013/04/23 Javascript
兼容IE和FF的图片上传前预览js代码
2013/05/28 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
详解react-native-fs插件的使用以及遇到的坑
2017/09/12 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
基于ts的动态接口数据配置的详解
2019/12/18 Javascript
微信小程序实现拼图小游戏
2020/10/22 Javascript
解决vue-pdf查看pdf文件及打印乱码的问题
2020/11/04 Javascript
[00:17]DOTA2荣耀之路5:It’s a disastah!
2018/05/28 DOTA
Python 爬虫模拟登陆知乎
2016/09/23 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
Python多版本开发环境管理工具介绍
2019/07/03 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
解决python多行注释引发缩进错误的问题
2019/08/23 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
美国名表在线商城:Ashford(支持中文)
2019/09/24 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
让生命充满爱演讲稿
2014/05/10 职场文书
求职信标题怎么写
2014/05/26 职场文书
税务会计岗位职责
2015/04/02 职场文书
学校证明范文
2015/06/24 职场文书
小学校本教研总结
2015/08/13 职场文书
使用python向MongoDB插入时间字段的操作
2021/05/18 Python