javascript使用rem进行响应性开发

电脑版的商场昨晚完工了。今天，我渴望在手机端做这件事。当我提到手机端的网站时，首先想到的是要适应不同手机屏幕的宽度，保证在不同手机上可以正常显示给用户。我以前做这种网站没有介绍bootstrap。但是上一个项目完成后，我发现bootstrap不错，但是里面的各种样式我很少用，最多用来排版。当网站最终上传的时候，你会发现即使经过压缩，也会占据相当大的一部分，所以这次我想自己写，用响应的方式开发(我现在对它只知道一点点)。

1.百分比法：

顾名思义，边距、填充、宽度、高度等。页面元素的百分比是按%计算的。CSS中的百分比指的是父元素，所有的百分比都是一样的。子元素的宽度是50%，那么父元素的宽度是100%，子元素的左填充是50%，父元素的宽度是100%，子元素的边距是top:20%，那么父元素的高度是100。所以正文默认宽度为屏幕宽度(PC指浏览器宽度)，后代元素可以按百分比(或指定大小)定位，只适用于布局简单的页面，很难实现复杂的页面。

2.媒体查询：

这在css3中给出。我们要解决的问题是适应手机屏幕。这个媒体查询就是为了解决这个问题而诞生的。媒体查询的功能是为不同的媒体设置不同的css样式。这里的“媒体”包括页面大小、设备屏幕大小等。最常用的形式。

Phone: @ mediascreen和(最大宽度：767 px){/手机中的样式/}

Pad: @媒体屏幕和(最大宽度：991px)和(最小宽度：768){/平板样式/}

Pc: @ mediascreen和(最小宽度：992 px){/计算机中的样式/}

.(您可以设置更多节点)

如果使用媒体进行查询，必须保证每个像素下都有相应的适配效果。显然，你必须设置一个较小的宽度范围；

3.还有css3的rem单元：

Rem以根节点html的font-size值作为整个页面的基准大小，例如，html style='font-size:10px '然后1rem=10px如何适应？需要用js获取窗口的宽度(浏览器窗口的宽度)$(window)。加载页面时的宽度()；在开发手机页面时，我们通常会将最大宽度设置为640px，因为640px可以保证在目前为止最宽的手机上显示时，页面两端刚好适合屏幕。那我就举个小例子。

屏幕放大和缩小这三个div也是一行放大和缩小

超文本标记语言

div class=' container ' div class=' box ' 1/div class=' box ' 2/div class=' box ' 3/div/div CSS

样式html { font-size : 20px；} .容器{最大宽度： 640 px；border:1px纯红；margin:0 auto飞越：隐藏；盒子尺寸：边框盒子；} .左框{ float:宽度：10.6雷姆；//我在这里设置了html font-size :20 px；最大宽度为640px，相当于640/20=32 rem；一行有三个div，所以每个div宽10.6雷姆。也可以按照论坛描述设置html的字体大小：62.5%；因为浏览器默认像素是16px乘以62.5%后，是10px的整数；高度的方便计算：10.6雷姆；border:1px固体# 000；盒子尺寸：边框盒子；}/stylejs

script window . onresize=window . onload=function(){ var w=$(window)。宽度()；if(w640){ var size=20 * w/640；//640，当对应html的字号为20时，那么W的宽度就是对应的字号，可以计算为$ ('html ')。CSS ('fontsize '，size ' px ')；} }/脚本注意这里有一个小坑。当你把这个小演示拿到谷歌浏览器进行验证时，你会发现前三个div会随着你浏览器窗口的缩小而缩小，达到一定数值后就不会移动了。原因是谷歌浏览器默认支持html。最小字体大小为10px如果小于这个值，就不会变小。这就是我当时遇到的问题。我在网上搜索了差不多两个小时，不想一遍又一遍的理解。终于，我找到了这样一个非人类的原因。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。