bootstrap移动端布局的方式有哪些

本篇内容介绍了“bootstrap移动端布局的方式有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
　　一、下面我将简单的介绍移动端布
　　局的八种方式：
　　1.固定布局
　　2.流动布局
　　3.浮动布局
　　4.定位布局
　　5.混合布局
　　6.flex布局
　　7.rem布局
　　8.响应式布局
　　9.**圣杯布局10.**双飞翼布局
　　1.固定布局方法里把加好，然后根据设计稿设定相应的宽度即可，其他地方类似于pc端。优点思路沿用pc端，上手比较快缺点
　　大屏手机显示网页比较宽，而固定布局宽度参照永远是固定的宽度（设计稿的大小），导致左右两边会有空白。手机横屏的时候两边空白更亮。
　　2.流动布局
　　方法
　　适用百分比（%）做单位。
　　优点能更很好的适应各个屏幕分辨率的手机。缺点
　　不够灵活，添加元素时，需要更改其他元素的值。
　　3.浮动布局方法
　　float+clearfix（清除浮动）
　　/–不需兼容老版本–/
　　。clearfix:after{
　　content:””;
　　display:block;
　　clear:both;
　　}
　　–需要兼容老版本–/
　　clearfix:after{
　　content:””;
　　display:block;
　　clear:both;
　　height:0;
　　visibility:hidden;
　　}
　　**优点**? ? ? ? 这是传统的浮动方式，写法简单，实现效果起来干脆利落？ ? **缺点**对浮动元素要求比较严格，布局也不太灵活
　　4.定位布局方法在布局当中很常用，利用position+四个方位的具体值（top/left/right/bottom）相互配合，实现起来也比较容易优点
　　实现简单，在移动端中，定位很常用，尤其是弹窗，
　　。mask{
　　position:fixed;
　　left:50%;
　　top:50%;
　　-webkit-transform:translate3d（-50%,-50%,0）;
　　transform:translate3d（-50%,-50%,0）;
　　}
　　缺点
　　移动端中频繁的使用定位，会出现一些莫名的bug;
　　fixed+input在ios上存在bug,会出现使用fixed布局的元素乱掉。在android手机上当input框获取焦点时，换气键盘，会出现定位的元素被抬升至手机键盘的上方。（了解）
　　5.混合布局方法所谓混合布局，就是把所有学到的知识灵活运用在布局中。例如：rem+百分比（流动布局） flex+rem等优点布局灵活，集合其他布局的优势达到自己的布局要求缺点
　　代码有点累赘；代码不统一，维护困难
　　6.flex布局（重点）
　　方法
　　也叫弹性布局。
　　/–只需父元素设置–/
　　{
　　display:-webkit-box; /android2.1-3.0 ios 3.2-4.3/
　　display:-moz-box; /firefox/
　　display:-webkit-flex; /chrome 21+/
　　display:-ms-flexbox; /wp ie 10/
　　display:flex; /android 4.4/
　　}
　　/–然后子元素设置相应的比例–/
　　{
　　-webkit-box-flex:1;
　　-webkit-flex:1;
　　-ms-flex:1;
　　flex:1;
　　}
　　这个是最简单的flex布局了，其实弹性布局里面还有很多简单高效实用的属性，很方便移动端的布局。？ ? **优免费云主机域名点**? ? ? ? 自适应很好，灵活性很强，目前在移动端应用的还是比较广泛。？ ? **缺点**需要写很多兼容代码。
　　7.rem布局方法rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的font-size大小就可以控制rem的大小。有以下两种适配方式：
　　1.rem+@media（通过媒体查询设置html的font-size值，达到自适应）
　　html{
　　-webkit-text-size-adjust:none;
　　font-size:10px;
　　}
　　@media screen and （min-width:321px） and （max-width:375px）{
　　html{
　　font-size:10px;
　　}
　　}
　　@media screen and （min-width:376px） and （max-width:414px）{
　　html{
　　font-size:10.25px;
　　}
　　}
　　@media screen and （min-width:415px） and （max-width:454px）{
　　html{
　　font-size:10.5px;
　　}
　　}
　　@media screen and （min-width:455px） and （max-width:554px）{
　　html{
　　font-size:10.75px;
　　}
　　}
　　@media screen and （min-width:455px）{
　　html{
　　font-size:11px;
　　}
　　}
　　2.rem+js（通过js自动获取设备宽度，计算得到相应设备下html的font-size值达到自适应）（了解）
　　！function（n） {
　　var e=n.document,
　　t=e.documentElement,
　　i=720,
　　d=i / 100,
　　o=”orientationchange” in n ? “orientationchange”: “resize”,
　　a=function（） {
　　var n=t.clientWidth || 320;
　　n > 720 && （n=720），
　　t.style.fontSize=n / d + “px”
　　};
　　e.addEventListener && （n.addEventListener（o, a, !1）， e.addEventListener（”DOMContentLoaded”, a, !1））
　　} （window）;
　　优点在任何设备下都可以达到完全适配，页面布局样式完全自适应缺点
　　rem+@media这种方式不能所有设备全适配
　　8.响应式布局方法使用@media（媒体查询）设置页面在不同的屏幕宽度下达到自适应以及响应式（根据不同屏幕大小，页面布局，样式会做出相应的调整）典型案例（bootStrap官网）优点不仅在不同的屏幕下达到自适应，还会在相应的屏幕下对页面布局，样式做出相应的调整，达到更加的用户体验缺点
　　兼容各种设备工作量大，效率低下；代码累赘，会出现隐藏无用的元素，加载时间过长；一定程度上改变了网站原有的布局结构，会出现用户混淆的情况；增加UI和开发的工作量。
　　9.圣杯布局
　　利用float来实现，首先将三列放到一个父元素内后左浮动，之后给左右中分别设置宽度200px,250px,100%。
　　之后给中间，右边分别设置margin-left为-200px,-250px。之后再将左右两列进行相对定位position：relative;并分别设置left:-200px;right:-250px;最后便是等高布局了，给左中右设置padding-bottom:2000px;margin-bottom:-2000px;给其父元素设置overflow:hidden即可。“bootstrap移动端布局的方式有哪些”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注百云主机网站，小编将为大家输出更多高质量的实用文章！

相关推荐: JavaScript传参的方式有哪些

这篇文章主要介绍“JavaScript传参的方式有哪些”，在日常操作中，相信很多人在JavaScript传参的方式有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”JavaScript传参的方式有哪些”的疑惑有所帮助！接下来，…