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

2024-09-29 18:20:12

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字体设置的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

Js动态设置rem来实现移动端字体的自适应代码

下面一段代码给大家介绍了Js动态设置rem来实现移动端字体的自适应,以此做个记录,方便以后需要,感兴趣的朋友一起看看吧. 具体代码如下所示: //设置根元素字体 var win = window, doc = document; function setFontSize() { var winWidth = $(window).width(); //750这个数字是根据你的设计图的实际大小来的,所以值具体根据设计图的大小 var size = (winWidth / 750) * 100; do
浅谈pc端rem字体设置的问题

1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTOM都采用了REM,并且HTML的FONT-SIZE设置的是100PX一是觉得计算方便,二是如果设为10PX,谷歌会不兼容.此时BODY的FONT-SIZE设置为正常值,12PX.不然的话,其它的DOM都会继承HTML的100PX的FONT-SIZE,导致效果巨大. 3.当浏览器窗口变化时,内容的大小
浅谈pytorch卷积核大小的设置对全连接神经元的影响

3*3卷积核与2*5卷积核对神经元大小的设置 #这里kerner_size = 2*5 class CONV_NET(torch.nn.Module): #CONV_NET类继承nn.Module类 def __init__(self): super(CONV_NET, self).__init__() #使CONV_NET类包含父类nn.Module的所有属性 # super()需要两个实参,子类名和对象self self.conv1 = nn.Conv2d(1, 32, (2, 5), 1,
浅谈pytorch torch.backends.cudnn设置作用

cuDNN使用非确定性算法,并且可以使用torch.backends.cudnn.enabled = False来进行禁用如果设置为torch.backends.cudnn.enabled =True,说明设置为使用使用非确定性算法然后再设置: torch.backends.cudnn.benchmark = true 那么cuDNN使用的非确定性算法就会自动寻找最适合当前配置的高效算法,来达到优化运行效率的问题一般来讲,应该遵循以下准则: 如果网络的输入数据维度或类型上变化不大,设置
浅谈redis的过期时间设置和过期删除机制

目录一:设置过期时间二:保存过期时间三:移除过期时间四:计算并返回剩余生存时间五:过期键的删除策略六:redis使用的策略一:设置过期时间 redis有四种命令可以用于设置键的生存时间和过期时间: EXPIRE <KEY> <TTL> : 将键的生存时间设为 ttl 秒 PEXPIRE <KEY> <TTL> :将键的生存时间设为 ttl 毫秒 EXPIREAT <KEY> <timestamp> :将键的过期时间设为
浅谈MyBatis Plus主键设置策略

根据一次插入失败报错来了解下MyBatis Plus主键设置策略今天学习使用MyBatis Plus,发现使用代码生成器生成对应的实体类.Service和Mapper后,在保存数据时报错 com.baomidou.mybatisplus.exceptions.MybatisPlusException: java.lang.reflect.InvocationTargetException at com.baomidou.mybatisplus.MybatisSqlSessionTemplate$
浅谈移动端之js touch事件手势滑动事件

现分享一篇关于touch的文章,望指教! 原理: 当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 具体代码如下: $("body").on("touchstart", function(e) { e.preventDefault(); startX = e.
浅谈vue2 单页面如何设置网页title

前端框架如Vue.React等都是单页面的应用,也就是说整个web站点其实都是一个index页面,所谓的页面跳转都是替换index.html里边的内容,而页面的title是在每个页面初始化的时候才设置一次.对于现在的前端框架,传统的每个页面设置title标签的做法是不行的. 推荐使用vue-wechat-title插件下载安装插件依赖 npm install vue-wechat-title --save 在main.js中引入插件 import VueWechatTitle from 'vu
浅谈matplotlib默认字体设置探索

控制默认字体的设置根据官方文档https://matplotlib.org/tutorials/text/text_props.html#default-font可知: The base default font is controlled by a set of rcParams 默认字体是由一组rcParams控制的. rcParam usage 'font.family' List of either names of font or {'cursive', 'fantasy', 'mo
vue+px2rem实现pc端大屏自适应的实例代码(rem适配)

配置前言项目构建:基于vue-cli3构建,使用postcss-px2rem px2rem-loader进行rem适配实现原理:每次打包,webpack通过使用插件postcss-px2rem,帮我们自动将px单位转换成rem单位 px2rem是一个插件,功能是将px自动转换为rem,帮助开发者减少像素间的相互转换计算过程. 前方有坑:UI框架部分组件使用JavaScript将css作为内联样式直接写在html标签内,打包适配时不会读取相关css,所以要配置相关样式,在style中需要" !
浅谈Pycharm最有必要改的几个默认设置项

最近在用Pycharm学习Python的时候,总有两个地方感觉不是很舒服,比如调用方法的时候区分大小写(thread就不会出现Thread,string就不会出现String)等,这让我稍稍有点不舒服,所以研究了一下对其默认设置的修改,写个总结: 1.忽略大小写项 2.悬浮窗提示项 3.项目文件编码项 4.行号显示项 5.鼠标滚轮修改字体大小项 6.取消单行显示文件项 7.Python Script配置忽略大小写:此设置就是无论你输入的thread是大写还是小写,都会出现代码提示或者智能补充.

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

相关推荐

随机推荐