rem响应式布局_描述rem是如何实现响应式布局-程序员宅基地

1.什么是rem?
当前页面中元素的REM单位的样式值都是针对于HTML元素的font-size的值进行动态计算的
2.rem配合媒体查询实现响应式布局。

@media screen and (min-width: 320px) {
    html {font-size: 14px;}
}
@media screen and (min-width: 360px) {
    html {font-size: 16px;}
}
@media screen and (min-width: 400px) {
    html {font-size: 18px;}
}

3.如何做rem响应式布局?
1、从UI设计师拿到PSD设计稿,然后在样式中给HTML设定一个font-size的值,我们一般都设置一个方便后面计算的值,例如:100px。

html{
font-size:100px;//1rem=100px
}

2、写页面,写样式
首先按照设计稿的尺寸来写样式,然后在写样式值的时候,需要把得到的像素值除以100计算出对应的REM的值。
值得注意的是:真实项目中外层盒子的宽度我们一般还是不写固定值,沿用流式布局法的思想,我们用百分比的方式布局

margin:0  0.2rem
height:3rem;

3、根据当前屏幕的宽度和设计稿的宽度来计算我们HTML的font-size的值
例如:设计稿宽度为640px,其中有一个部分是轮播图,它的尺寸是600*300,在样式中给HTML设定一个font-size的值为100px,则轮播图大小应该为 6rem×3rem,那如果手机屏幕宽度为375px,其font-size应该设置为多少。

375/640*100->fontsize=58.59375//此时轮播图能自适应手机屏幕大小

根据当前屏幕宽度和设计稿宽度的比例,动态计算一下当前宽度下的fontsize值应该是多少,如果fontsize的值改变了,之前设定的所有REM单位的值自动会跟着放大或者缩小。可以通过以下这段代码实现:

但如果当前屏幕宽度大于设计稿宽度,图片会被拉长而失真,所以以上代码需要稍微做些修改:

//html部分

<section id="main">
<div class="box"></div>
</section>
//js部分
<script>
~function(){
    
var desW=640,
winW=document.documentElement.clientwidth,
ratio=winW/desW;
var oMain=document.getElementById(“main“);
if(winW>desW){
    
oMain.style.width=desW+"px";
oMain.style.margin="0 auto"return}
document.documentElement.style.fontSize=ratio*100+“px“;
}();
</script>
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_40713392/article/details/86594103

智能推荐

matlab仿真三相不平衡度,matlab调用openDSS进行三相不平衡潮流计算-程序员宅基地

文章浏览阅读2k次。应用介绍这是使用matlab调用openDSS进行三相不平衡潮流计算过程和方法步骤,OpenDSS是由美国电科院(EPRI)开发的开源配电系统仿真工具。 用户可以在使用COM接口的同时使用OpenDSS仿真任何配电网系统(有关详细信息,请参见OpenDSS手册)。 在这里,OpenDSS使用Matlab COM接口用于配电系统的潮流计算。 以下讲述了从安装到openDSS潮流计算,如何定义各个分布..._opendss matlab安装

深度学习的发展历程(思维导图、时间轴)_深度学习发展图-程序员宅基地

文章浏览阅读5.5k次,点赞6次,收藏13次。机器学习和深度学习的关系事实上,很多PGM也可从神经网络的方面来解释。尤其是VAE,它可看做二类的混合模型。当PGM的层太多时,学习和推断都很难。因此,Deep learning往往偏向于指代Deep neural network。从感知机到深度学习目前所说的深度学习实际上多指2006年开始的一系列模型。深度学习大火的原因:逐渐增加的数据量并行计算、分布式系统的发展硬件GPU等的发展最重要的是,其效果好,优于之前大火的SVM虽然目前深度学习的理论稍滞后,但其效果好呀~未来说比对_深度学习发展图

php游戏服务器教程,C++游戏服务器编程从入门到掌握视频教程(全)-程序员宅基地

文章浏览阅读255次。任务1: 课程预览PPT2-课程概述.mp43-IP详解第一部分.mp4任务4: 预览IP详解PPT5-IP详解第二部分.mp46-TCP详解第一部分(介绍 + 工作原理 + 头部详解).mp47-TCP详解第二部分(状态与连接详解).mp48-TCP详解第三部分(断开以及传送数据详解).mp49-TCP详解04(用wireshark工具查看TCP连接和断开和TCP杂项).mp4任务10: 预览T..._php 游戏视频教程

如何解决Invalid bound statement (not found):问题_invalid bound statement (not found): com.szkingdom-程序员宅基地

文章浏览阅读600次。在写ssm junit测试的时候一直报这个错, 配置文件以及包名都检查过了,一直没解决。各位大神帮帮忙org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): com.zking.ssm.mapper.LogininfoMapper.getUserByNameAndPwd at org.a..._invalid bound statement (not found): com.szkingdom.sfixp.parti.dao.partidao.

中心化傅里叶变换_傅里叶频谱中心化-程序员宅基地

文章浏览阅读6.8k次,点赞9次,收藏43次。参考文章:数字图像频谱中心化研究数字图像有时需要变换到频率做处理,比如滤波等。但直接对数字图像进行二维DFT变换得到的频谱图是高频在中间,低频在四角。为了把能量(在低频)集中起来便于使用滤波器,可以利用二维DFT的平移性质对频谱进行中心化。频谱图比较亮的地方就是低频,因为图像的能量一般都是集中在低频部分。所以推导出来的结论是:对数字图像的每个像素点的取值直接乘以(-1)^(x+y),x和y是像素坐标。这之后再做傅里叶变换,最后即为中心化后的傅里叶变换。代码:# 未中心化的傅里叶变_傅里叶频谱中心化

读《Boost程序库完全开发指南》_boost::适配器链-程序员宅基地

文章浏览阅读833次。读《Boost程序库完全开发指南》 2011-05-18 20:47:19| 分类: 读书|举报|字号 订阅 C++确实很复杂,神一样的0x不知道能否使C++变得纯粹和干爽? boost很复杂,感觉某些地方有过度设计和太过于就事论事的嫌疑,对实际开发工作的考虑太过于理想化。学习boost本身就是一个复杂度,有魄力在_boost::适配器链

随便推点

使用Monkey进行Android手机应用的压力测试_monkey压力测试-程序员宅基地

文章浏览阅读547次。由于monkey太过随机,最后根本无法控制,很容易陷于一个页面无法出来,或者陷入某个无关紧要的地方无法出来,导致测试结果并不具有很好的意义。在monkey测试中,由于事件的随机性,使得monkey容易卡在某些简单页面,比如登陆页面这种可操作内容很少的页面。***执行100个伪随机用户事件流,事件间隔为300毫秒: adb shell monkey -p 包名 --throttle 300 100。由于Monkey的随机性,如果Bug是由于事件发生的特定序列产生的,往往很难复现Bug。_monkey压力测试

HBase-程序员宅基地

文章浏览阅读40次。在HBase中,一条数据拥有唯一的主键,一个或多个列族(一般最多设计不会超过3),列族必须在定义的时候声明,一个列族有任意数量的列,所以说列具有松散性,在声明时可以不定义,每一个数据可以有多个版本,当版本达到定义的版本数时(默认为1),就会把最早的版本清理掉,一个列族的数据在物理上保存在同一个HFile/StoreFile中。在查找时通过主键找单对应的列族,再找到对应的列,最后确定具体的版本号。维护数据:当有失效的HRegion时,会将失效的HRegion分配到正常的HRegionService。

Python数据可视化小结_python数据可视化心得体会-程序员宅基地

文章浏览阅读3.2k次,点赞3次,收藏23次。通过数据可视化工具来取得引人注目的效果。这是关于了解数据背后隐藏的信息,通过了解受众,并不断接收和实施反馈,以不断改进可视化效果。本文一步一步通过具体数据例子来讲解了如何取得引入注目的可视化效果的完整步骤,并给出了相应的代码示例。您学废了嘛?_python数据可视化心得体会

十四、MySQL--主从复制和集群_mysql master和backup是主从还是集群-程序员宅基地

文章浏览阅读871次。0. 什么是主从复制?把主服务器(master)的bin日志复制到从服务器(slave)上再执行一遍,从而达到两台服务器上数据同步的效果。什么是集群?集群是一组相互独立的、通过高速网络互联的计算机,它们构成了一个组,并以单一系统的模式加以管理。一个客户与集群相互作用时,集群像是一个独立的服务器。集群配置是用于提高可用性和可缩放性。1.主从复制原理主数据库开启二进制日志,数据变更产生二进制日志从服务器的I/O线程读取主数据库的Bi..._mysql master和backup是主从还是集群

基于MATLAB的高斯白噪声和频率选择性衰落信道下的OFDM OTFS 16QAM QPSK LDPC Turbo调制解调误比特率性能仿真(附带代码和仿真说明)_ofdm系统在不同衰落信道下的误比特率性能分析-程序员宅基地

文章浏览阅读653次,点赞21次,收藏15次。同时,还对添加保护间隔、信道均衡等关键技术进行了详细讲解,并附带了仿真说明,使读者可以轻松理解和应用。通过本文的研究和分析,我们对OFDM和OTFS在高斯白噪声、频率选择性衰落信道下的误比特率性能有了更深入的理解。我们采用了16QAM和QPSK的调制方式、LDPC和Turbo的编码方式,并对添加保护间隔、信道均衡等关键技术进行了研究。Turbo编码也是一种常用的前向纠错码,它通过串并组合两个编码器的输出,并引入交织技术,在信道传输过程中提高了错误纠正能力。2.1 16QAM调制。OFDM调制解调技术。_ofdm系统在不同衰落信道下的误比特率性能分析

Android.mk 分析android buid工程需要的makefile知识点总结_android 解析android.mk工程-程序员宅基地

文章浏览阅读502次。1.0 make -C /home/wangxiancan/android -f build/core/main.mk all_modules -C 表示进入到某目录 执行(解析)其中的makefile -f 表示将后面的文件当做makefile文件解析 (make命令默认只识别如Makefile命名的文件,不过你会发现-C后面目录下已经有一个makefile了,并且这个m..._android 解析android.mk工程

推荐文章

热门文章

相关标签