pc端与移动端一体响应式方案,pc和移动端适应
作为一个前端攻城狮，是不是经常会遇到各种响应式的问题？下面就来说说吧：
1.响应式跟自适应有什么区别？
有些人可能不知道响应式和自适应式的区别，甚至认为它们是一回事，其实不然。
首先出现的是自适应，其次是反应。响应式布局等于流动网格布局，自适应式布局等于使用固定分界点的布局。
如下图所示，对于同一个页面(图中的Html)，如果用响应式布局处理，用不同的设备(电脑、平板、手机)访问这个页面，最后看到的布局和内容就大不一样了。
如果用自适应布局来处理，无论接入设备如何不同(下图是三款大小不同的手机)，最终页面的内容和布局基本相同，只是大小略有不同。
响应网站：https://www.microsoft.com/zh-cn/
适应性网站：http://m.ctrip.com/html5/
2.实现响应式有哪几种方式？
1.将媒体查询与rem字体结合使用。
记住，先把这个meta标签加到head标签上(设置设备按大小一比一显示，禁止用户缩放页面):
meta= viewport content= width=device-width，initial-scale=1，maximum-scale=1，user-scalable=no 后面是媒体查询，大家应该都知道。这是响应性最重要的部分。
如果大于1000px，请使用：
@ mediascreenand(最小宽度：1000像素){.}如果相应的PC端页面在小于1000像素和大于768像素之间：
@ mediascreenand(最大宽度：1000像素)和(最小宽度：768像素){.}如果相应的tablet页面小于768像素：
@ mediascreenand(max-width:768 px){.}对应手机页面然后是rem字体。rem是css3的新单位，指的是字体大小相对于根元素的单位。一般在html中设置，体，结合媒体查询，我们可以这样写：
@ media screen and(min-width:1000 px){ html，body { font-size:14px；} } @媒体屏幕和(最大宽度：1000px)和(最小宽度：768px){html，body { font-size:13px；} } @媒体屏幕和(max-width:768px){html，body { font-size:12px；}}然后在样式表中，所有的px单位都转换成rem，这样rem就会根据我们在html，body body中设置的字体单位自动缩放。
至于1px是多少rem，我习惯了100px等于1rem。这样做有两个好处：
首先，谷歌Chrome的默认字体是12px。如果小于10px，则无效。如果1rem等于10px，则没有任何影响。第二，容易转换。比如我们是15px，我们就写0.15rem
当然还有几个比较方便的。如果使用webpack，可以使用postcss-pxtorem或者px2rem-loader，打包时会自动把你写的样式转换成rem。详细内容网上有教程。
转换前：
转换后：
还有一个使用sublime text的插件，cssrem神器！当您键入它时，它会自动转换。
下面介绍一种用js自动计算rem的方法，无需媒体查询即可使用：
//基准大小相当于窗口缩放到设计稿大小时的正文字体大小。这里，设置100px是为了便于计算const basesize=100。//设置rem函数函数setRem() {//当前页面宽度到1280宽度的缩放比例可以根据自己的需要进行修改。280是设计稿的宽度const scale=document.documentelement.clientwidth/1280; let auto width=math . round((baseSize * math . min(scale，2)))；//判断页面缩放到小于99px的字体时不再缩小防止内容溢出if(math . round((basesize * math . min(scale，2))))=99){ auto width=99；}//设置页面根节点document . document element . style . fontsize=auto width px }//初始化setRem() //改变窗口大小时，重置Rem window . onresize=function(){ Set rem()}这样样式表的所有px单位都可以转换为rem。
2.使用插件(bootstrap)
网格布局，这个例子使用bootstarp P的网格系统。
从上图可以看出，只要在Class中添加bootstrap的唯一类前缀，就可以使用bootstrap。当然，你得先介绍一下bootstrap的插件。示例：
Class= col-xs-6col-sm-3/div这个代码的意思是，当大小小于768px时，这个div占一半的位置，而当=768px和992px时，这个div只占三分之一的位置。
这样就可以根据不同的屏幕尺寸达到响应式的效果。
3.使用弹性布局(flex)
因为灵活布局涉及的知识点比较多，后续会比较多~
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。