如何实现页面的响应式布局？

所谓响应式布局，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。他的好处我们不用写多套屏幕模板而只需要写一个就可以实现，现在用的比较多的就是bootstrap的响应式布局，而他实现的原理就是，他会为一个元素设置多个类，然后通过媒体查询会根据当前屏幕分辨率来选择适合的类进行渲染。

bootstrap主要是利用栅格式布局的原理，会自动将屏幕分为12列，然后我们可以根据需要分类，并且他将屏幕分为三类：

col-xs-* 超小屏幕，手机 (宽度<768px)
col-sm-* 小屏幕，平板 (宽度≥768px)
col-md-* 中等屏幕，桌面显示器 (宽度≥992px)

而*代表的就是所要写的就是在当前屏幕中所占的列数，这些都是写在每个元素上，但我们还需要在他们的父元素上加上row的类（row表示行，还有column列），这样就简单的实现了响应式布局。

这里我还要介绍的是另一种响应式布局的方法，就是利用rem，然后通过屏幕的分辨率来改变px，实现的方法主要是：

function setSize() {// 获取window 宽度var winWidth =  window.innerWidth;document.documentElement.style.fontSize = (winWidth / 设计稿像素宽) * 100 + 'px' ;}

　　通过上述的计算方式我们就可以计算出在不同屏幕下的像素值，这里的100是设置1rem=100px，然后让它自动更新就可以了。

转载于:https://www.cnblogs.com/abey/p/7054756.html

如何实现页面的响应式布局？相关推荐

web页面之响应式布局
一.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网 ...
html页面的响应式布局,HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...
响应式布局---菜单
一个简单的响应式菜单,仅使用@media query实现. 上图的作用就是将普通的菜单在缩小浏览器屏幕到一定宽度,或者是在移动设备上的显示效果.现在分步进行实现: 第一步:先构建一个普通的菜单,具体显 ...
什么是自适应布局？什么是响应式布局？他们的区别是什么？
1.什么是响应式布局响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式.通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验.换句话说就是一个网站能够兼容多个终端,而不是为了每一 ...
CSS之布局系列--静态布局、流式布局、自适应布局、响应式布局的概念及区别
原文网址:CSS之布局系列--静态布局.流式布局.自适应布局.响应式布局的概念及区别静态布局.流式布局.自适应布局.响应式布局的概念及区别_IT利刃出鞘的博客-CSDN博客简介说明本文介绍前端的 ...
响应式布局，你需要知道的一切
来源:campcc https://juejin.cn/post/6951575591099301895 2011年,Google 发布了 Android 4.0,在经历了 Cupcake,Donut ...
响应式布局，你需要知道这些
来源:campcc https://juejin.cn/post/6951575591099301895 2011年,Google 发布了 Android 4.0,在经历了 Cupcake,Donut ...
Web响应式布局设计简介
随着移动互联的到来,市面上的移动终端设备越来越多屏幕尺寸也大小不一.就拿苹果的iPhone来说就有多个不同尺寸的版本,还有iPad也是随着技术的进步屏幕大小.分辨率也在变化.更不用说基于开源Andro ...
端开发技术—解密Flutter响应式布局
Flutter是一个跨平台的应用开发框架,支持各种屏幕大小的设备,它可以在智能手表这样的小设备上运行,也可以在电视这样的大设备上运行.使用相同的代码来适应不同的屏幕大小和像素密度是一个挑战. Flut ...

如何实现页面的响应式布局？

如何实现页面的响应式布局？相关推荐

最新文章

热门文章