浅谈PC端和移动端的响应性

浅谈PC端和移动端的响应性作为前端攻城狮，是否经常遇到各种响应问题？下面说说：1.responsive和adaptive有什么区别？有些人可能不知道responsive和adaptive的区别，甚至认为它们是一回事，其实不然。自适应是最先出现的。响应能力稍后出现。响应式布局等于流体网格布局，而自适应布局等于具有固定分割点的布局。如下图，对于同一个页面（图中的Html），如果使用响应式布局来处理，使用不同的设备（电脑，平板，手机）访问这个页面，最终的布局和你看到的内容有很大的不同。不同的。而如果使用自适应布局来处理的话，无论接入设备如何不同（下图是三款不同尺寸的手机），你看到的最终页面的内容和布局基本是一样的，只是尺寸是稍微不一样。响应式网站：https://www.microsoft.com/zh-cn/自适应式网站：http://m.ctrip.com/html5/2、响应式的实现方式有哪些？1.使用媒体查询（MediaQuery）结合rem字体，首先在标签中加入这个meta标签（设置设备显示为一比一大小，禁止用户缩放页面）：其次是mediaquery，这个大家应该都知道，这个最重要响应能力的一部分。如果大于1000px，使用：@mediascreenand(max-width:1000px)and(min-width:768px){...}如果对应的tablet页面在小于1000px和大于768px之间：@mediascreenand(max-width:1000px)and(min-width:768px){...}对应平板页面如果小于768px:@mediascreenand(max-width:768px){...}对应移动端页面再对应rem字体，rem是css3新的单位，指的是字体大小相对于根元素的单位。一般设置在html,body中，结合mediaquery我们可以这样写：@mediascreenand(min-width:1000px){　　html,body{　　　font-size:14px;　　}}@mediascreenand(max-width:1000px)and(min-width:768px){　　html,body{　　　font-size:13px;　　}}@mediascreenand(max-width:768px){　　　html,body{　　　font-size:12px;　　}}然后在样式表中，将px单位转换为rem，这样rem就会以我们设置的字体单位为准html和body自动缩放的过程。至于rem等于多少1px，我习惯100px等于1rem。这样有两个好处：第一，谷歌浏览器默认字体是12px，小于12px会失败。它没有效果。第二，易于转换。比如我们有15px，我们就写0.15rem。当然，还有几个更方便的。如果你使用webpack，你可以使用postcss-pxtorem或者px2rem-loader，它会把你写的样式在打包的时候自动转为rem。网上有具体的教程。转换前：转换后：sublimetext插件cssrem神器还有一个使用方法！它会在您键入时自动转换。图片说明这里介绍一种用js自动计算rem的方法，不用mediaquery：//basesize等同于窗口缩放到设计稿大小时body的字体大小。这里设置100px方便计算。constbaseSize=100//setremfunctionfunctionsetRem(){//当前页面宽度相对于1280宽度的缩放比例可以根据需要修改。1280是设计稿的宽度constscale=document.documentElement.clientWidth/1280;让autoWidth=Math.round((baseSize*Math.min(scale,2)));//当判断页面缩放到小于99px的字体时不再收缩防止内容溢出if(Math.round((baseSize*Math.min(scale,2)))<=99){autoWidth=99;}//设置页面根节点字体大小document.documentElement.style.fontSize=autoWidth+'px'}//初始化setRem()//窗口大小改变时重置remwindow.onresize=function(){setRem()}这样就只能将样式表的px单位转换成rem了。2.使用插件（bootstrap）对布局进行网格化。本例中使用了bootstrap的网格系统。从上图可以看出，只要给类加上bootstrap特有的Class前缀，就可以使用bootstrap了。当然，您必须先导入bootstrap。插件。例子：