浅谈pc端rem字体设置的问题
更新时间：2017年08月03日 08:10:19 投稿：jingxian
下面小编就为大家带来一篇浅谈pc端rem字体设置的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
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字体设置的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了微信小程序画布显示图片绘制矩形选区效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2024-05-05
这篇文章主要介绍了JavaScript对象创建模式,结合实例形式总结分析了JavaScript常见的对象创建模式,包括工厂模式、构造函数模式、原型模式、动态原型模式、寄生构造函数模式、稳妥构造函数模式等,需要的朋友可以参考下2016-10-10![Javascript的console['''']常用输入方法汇总](//img.jbzj.com/images/xgimg/bcimg2.png)
Javascript的console['''']常用输入方法汇总
本文给大家带来了十几种Javascript的console['']常用输入方法，每种方法给大家介绍的都很详细，需要的朋友参考下吧2018-04-04
js命名应遵循简洁、语义化的原则,下面这篇文章主要给大家介绍了关于JavaScript命名约定的最佳实践指南,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了基于javascript html5实现翻书特效的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要介绍了详解webpack 热更新优化，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在进行微信公众账号开发的时候，需要知道当前的浏览器是微信内置的浏览器，那么如何判断呢？这是就只有通过浏览器的User Agent来进行判断了2014-09-09
这篇文章主要为大家详细介绍了JavaScript适配器模式的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
Map是一组键值对的结构,具有极快的查找速度,下面这篇文章主要给大家介绍了关于JS利用map整合双数组的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
这篇文章主要为大家详细介绍了js实现小时钟效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
![Javascript的console['''']常用输入方法汇总](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论