浅谈pc和移动端的响应式的使用
|
身为一个前端攻城狮，是不是常常碰着各类百般的相应式题目？下面我们来说一下： 1.相应式跟自顺应有什么区别? 有些人也许还不知道相应式跟自顺应的区别,乃至以为他们是统一个对象,着实不是的. 自顺应是最早呈现的，后头才有了相应式。相应式机关便是活动网格机关，而自顺应机关便是行使牢靠支解点来举办机关。 如下图所示，对付统一个页面（图中的Html），假如用相应式机关来处理赏罚的话，用差异装备（电脑、平板、手机）去会见此页面，最后看到的机关和内容有很大差异。 而假如用自顺应机关行止理赏罚的话，那不管会见装备怎样的差异（下图是三台尺寸纷歧样的手机），最后看到的页面内容和机关根基上照旧一样的，就是尺寸略有差异。 相应式网站：https://www.microsoft.com/zh-cn/ 自顺应网站： 2.实现相应式有哪几种方法? 1.行使媒体查询(Media Query) 团结 rem字体 记着,先在 <head> 标签里插手这个meta标签(配置装备凭证一比一的尺寸举办表现，而且榨取用户缩放页面): <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 其次是媒体查询，这个各人应该都知道，这个是相应式最重要的部门。 假如大于1000px，就用： @media screen and (min-width:1000px){...} 对应PC端页面 假如在小于1000px和大于768px之间： @media screen and (max-width:1000px) and (min-width:768px) {...} 对应平板端页面 假如小于768px： @media screen and (max-width:768px){...} 对应手机端页面 然后是rem字体，rem是css3新出的单元，是指相对付根元素的字体巨细的单元。一样平常配置在html,body，团结媒体查询我们可以这样写： @media screen and (min-width:1000px){ html,body{ font-size:14px; } } @media screen and (max-width:1000px) and (min-width:768px){ html,body{ font-size:13px; } } @media screen and (max-width:768px){ html,body{ font-size:12px; } } 然后在样式表内里,把px单元都转换为rem,这样rem就会按照我们在html,body配置的字体单元举办自动缩放的进程. 至于1px便是几多rem呢,我风俗是100px便是1rem,这样做的甜头有两点: 第一,谷歌赏识器的默认字体是12px,小于就失效,假如1rem便是10px的话是没有任何结果的.第二,轻易换算,譬喻我们15px的话,就写0.15rem. 虽然尚有几种较量利便的,假如你有行使webpack的话,可以行使 postcss-pxtorem 可能 px2rem-loader ,它们会把你写的样式打包的时辰自动转换为rem,详细网上有教程. 转换前: 转换后: 尚有一种就是行使sublime text的插件, cssrem 神器!在你输入的时辰就自动转换了. 这里先容一种用js自动计较rem的要领,可以不消到媒体查询: // 基准巨细 相等于窗口缩放到计划稿的尺寸时body的字体巨细 这里配置100px 利便计较 const baseSize = 100 // 配置 rem 函数 function setRem() { // 当前页面宽度相对付1280宽的缩放比例，可按照本身必要修改。1280是计划稿的宽度 const scale = document.documentElement.clientWidth / 1280; let 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() // 改变窗口巨细时从头配置 rem window.onresize = function () { setRem() } 这样只要把样式表的px单元都转换为rem即可. 2.行使插件(bootstrap) 栅格化机关，本例操作bootstarp的栅格体系 按照上图可以看到,只要在class加上bootstrap独占的Class前缀,就可以行使bootstrap了,虽然你得先引入bootstrap的插件.示例: <div class="col-xs-6 col-sm-3"></div> 这段代码的意思是在小于768px的尺寸下,这个div是占用一半的位置的,而在>=768px且<992px直接,这个div只占三分之一的位置. 这样就可以按照差异的屏幕尺寸来到达相应式结果. 3.行使弹性机关(flex) 因为弹性机关涉及的常识点较量多,后续会更~ （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
