javascript用rem来做响应式开发-创新互联

电脑版的商城昨晚做完了，今天赶着做手机端的，提到手机端的网站第一个想到的就是要 适应不同手机屏幕的宽度，保证在不同手机上都能正常显示给用户，我之前做这类网站都是无脑引进bootstrap的。但前一个项目做完之后我发现bootstrap虽好，但里面的各种样式我利用的很少，最多用到它排版，当网站最后上传的时候你会发现，即使压缩之后，它也会占用相当大的一部分，所以这次我想自己用原生写，响应式开发（我现在知道的尚浅）目前我了解有

创新互联建站服务项目包括嘉善网站建设、嘉善网站制作、嘉善网页制作以及嘉善网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，嘉善网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到嘉善省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

1.百分比法：

顾名思义，页面的元素的margin，padding，width，height，等等都用%来计算，CSS中的百分比中的百指的是什么，指的是父元素，所有百分比都是这样的。子元素宽度50%，那么父元素的宽度就是百，子元 素的padding-left：50%，父元素的宽度是百，子元素的margin-top:20%，那么父元素的高是百。所以body默认宽度是屏幕宽度 （PC中指的是浏览器宽度）子孙元素按百分比定位（或指定尺寸）就可以了，这只适合布局简单的页面，复杂的页面实现很困难。

2.媒体查询：

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

phone:@media screen and (max-width：767px) {/手机中样式/}

pad：@media screen and (max-width：991px)and(min-width:768) {/平板中样式/}

pc:@media screen and (min-width：992px){/电脑中样式/}

...（你还可以设置更多节点）

用媒体查询的话要保证每个像素下都有对应的适配效果显然你要设置更小的宽度范围；

3.还有就是css3的单位rem：

rem就是将根节点html的font-size的值作为整个页面的基准尺寸，例如那么1rem=10px;如何做到适配呢？那就要用到js在页面加载时获取window的宽度（浏览器窗口的宽度）$(window).width();在开发手机页面的时候，一般我们设置大宽度为640px，因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕，那接下来我就举一个小例子。

屏幕放大缩小这三个div也同样还在一行等比放大缩小

html

  
1
  
2
  
3

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：javascript用rem来做响应式开发-创新互联
本文路径：http://www.wjwzjz.com/article/dcegio.html