浅谈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 相关文章推荐
js限制文本框输入长度两种限制方式(长度、字节数)
Dec 19 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
Javascript setInterval的两种调用方法(实例讲解)
Nov 29 Javascript
javascript实现动态侧边栏代码
Feb 19 Javascript
jQuery统计指定子元素数量的方法
Mar 17 Javascript
Bootstrap每天必学之媒体对象
Nov 30 Javascript
jQuery遍历节点树方法分析
Sep 08 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
使用Vue生成动态表单
Nov 26 Javascript
微信小程序后端无法保持session的原因及解决办法问题
Mar 20 Javascript
JavaScript canvas实现流星特效
May 20 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
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
ThinkPHP框架实现session跨域问题的解决方法
2014/07/01 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
Yii redis集合的基本使用教程
2020/06/14 PHP
JS模拟多线程
2007/02/07 Javascript
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
vue Render中slots的使用的实例代码
2017/07/19 Javascript
jQuery.parseJSON()函数详解
2019/02/28 jQuery
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
JavaScript 自定义html元素鼠标右键菜单功能
2019/12/02 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
2020/10/24 Javascript
使用jquery实现轮播图效果
2021/01/02 jQuery
用Pygal绘制直方图代码示例
2017/12/07 Python
对Python3中的input函数详解
2018/04/22 Python
python批量修改文件编码格式的方法
2018/05/31 Python
python opencv 图像拼接的实现方法
2019/06/27 Python
Python matplotlib学习笔记之坐标轴范围
2019/06/28 Python
Django实现文件上传和下载功能
2019/10/06 Python
详解centos7+django+python3+mysql+阿里云部署项目全流程
2019/11/15 Python
Python实现图片添加文字
2019/11/26 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
python 基于卡方值分箱算法的实现示例
2020/07/17 Python
自荐信格式
2013/12/01 职场文书
社区国庆节活动方案
2014/02/05 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
2015学校六五普法工作总结
2015/04/22 职场文书
2015年中学体育教师工作总结
2015/10/23 职场文书