介绍
小编给大家分享一下引导响应式布局如何实现,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强>响应式布局:
响应设计,意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样,我们利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。
我们利用响应式布局可以满足不同尺寸的终端设备非常完美的展现网页内容,使得用户体验得到了很大的提升,但是为了实现这一目的我们不得不利用媒体查询写很多冗余的代码,使整体网页的体积变大,应用在移动设备上就会带来严重的性能问题。
响应式布局常用于企业的官网,博客,新闻资讯类型网站,这些网站以浏览内容为主,没有复杂的交互。
<强>使用引导响应式布局
<强>实现方式:通过查询屏幕的宽度来指定某个宽度区间的网页布局。
超小屏幕,(移动设备),,,,w<768 px
小屏设备,768 px - 992 px大敌;,,,992年,768 & lt;=w & lt;
中等屏幕,992 px - 1200 px大敌;,992=& lt;w & lt; 1200
宽屏设备,,1200 px以上,,=1200,w>
首先需要在头脑中引入元标签,添加viewpirt属性,内容中宽度等于设备宽度、初始:页面首次被显示可见区域的缩放级别,取值1则页面按实际尺寸显示,无任何缩放;最大范围:允许用户缩放到的最小比例;user-scalable:用户是否可以手动缩放。代码如下:
& lt;元name=皏iewport"内容=翱矶?设备宽度,初始=1,最大范围=1,user-scalable=no"比;
& lt;链接rel=皊tylesheet"类型=拔谋?css"href=https://www.yisu.com/zixun/"/样式表/bootstrap.min.css "> 下面为使用引导布局的页面(登录表单界面),针对的是手机超小屏幕(iphone5)和电脑屏幕(祝辞=1200 px) .col-xs-12:小屏幕占12列大小,col-lg-5:大屏幕占5列大小,col-lg-offset-3:大屏幕缩进3列大小。这是一个比较简单的实例,想要适应其他屏幕如平板可添加col-md - *属性,大屏手机可添加col-sm - *属性。
& lt; div类=癱ontainer-fluid login"比;
& lt; div类=皉ow"祝辞
& lt; div类=癱ol-xs-12 col-sm-12 col-md-8 col-lg-5 col-lg-offset-3"比;
& lt;形式类=癴orm-horizontal loginForm"比;
& lt; h4类=癴orm-signin-heading"祝辞用户登录& lt;/h4>
& lt; div类=癴orm-group"祝辞
& lt;标签=癳mail"类=癱ol-sm-2 col-xs-3 control-label"在邮箱& lt;/label>
& lt; div类=癱ol-sm-8 col-xs-8"比;
& lt;输入类型=皌ext"类=癴orm-control"name=癳mail"占位符=扒胧淙胗氏洹氨?
& lt;跨类=癵lyphicon glyphicon-ok form-control-feedback"aria-hidden=皌rue"祝辞& lt;/span>
& lt;/div>
& lt;/div>
& lt; div类=癴orm-group"祝辞
& lt;标签=皃assword"类=癱ol-sm-2 col-xs-3 control-label"在密码& lt;/label>
& lt; div类=癱ol-sm-8 col-xs-8"比;
& lt;输入类型=皃assword"类=癴orm-control"name=皃assword"占位符=扒胧淙朊苈搿氨?
& lt;跨类=癵lyphicon glyphicon-ok form-control-feedback"aria-hidden=皌rue"祝辞& lt;/span>
& lt;/div>
& lt;/div>
& lt; div类=癴orm-group"祝辞
& lt; div类=癱ol-sm-offset-2 col-sm-4 col-xs-4“比;
& lt; div类=癱heckbox"祝辞
& lt; label>
& lt;输入类型=癱heckbox"祝辞记住我& lt;/label>
& lt;/div>
& lt;/div>
& lt; div类=癱ol-sm-4 col-xs-4 control-label"比;
& lt; a href=https://www.yisu.com/zixun/resetPwd.html " id="忘记">忘记密码?
