浅谈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 相关文章推荐
jquery 日期控件datepicker属性详细解析
Nov 08 Javascript
利用JS解决ie6不支持max-width,max-height问题的方法
Jan 02 Javascript
javascript生成随机大小写字母的方法
Feb 20 Javascript
JQuery中serialize()、serializeArray()和param()方法示例介绍
Jul 31 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
jQuery简单实现图片预加载
Apr 20 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
Dec 27 Javascript
Angular实现搜索框及价格上下限功能
Jan 19 Javascript
详解js创建对象的几种方法及继承
Apr 12 Javascript
JavaScript将数组转换为链表的方法
Feb 16 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
Vue实现菜单切换功能
Nov 08 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
模仿OSO的论坛(二)
2006/10/09 PHP
8个出色的WordPress SEO插件收集
2011/02/26 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php不用正则验证真假身份证
2013/11/06 PHP
PHP字符串的连接的简单实例
2013/12/30 PHP
PHP生成RSS文件类实例
2014/12/05 PHP
php+mysqli实现批量替换数据库表前缀的方法
2014/12/29 PHP
PHP 实现重载
2021/03/09 PHP
Prototype Number对象 学习
2009/07/19 Javascript
javascript中数组的多种定义方法和常用函数简介
2014/05/09 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
jquery判断至少有一个checkbox被选中的方法
2015/06/05 Javascript
简单谈谈javascript中this的隐式绑定
2016/02/22 Javascript
javascript获取select标签选中的值
2016/06/04 Javascript
AngularJS框架的ng-app指令与自动加载实现方法分析
2017/01/04 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
详解react-router4 异步加载路由两种方法
2017/09/12 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
2017/09/30 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
[25:59]Newbee vs TNC 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python基于正则表达式实现文件内容替换的方法
2017/08/30 Python
Python数据集切分实例
2018/12/08 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python Flask 搭建微信小程序后台详解
2019/05/06 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
CSS3实现的渐变幻灯片效果
2020/12/07 HTML / CSS
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
STRATHBERRY苏贝瑞包包官网:西班牙高级工匠手工打造
2020/11/10 全球购物
学校关爱留守儿童活动方案
2014/08/27 职场文书
绵山导游词
2015/02/05 职场文书
2016入党积极分子心得体会
2016/01/06 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书
2016年119消防宣传日活动总结
2016/04/05 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python