bootstrap怎么在移动端横向布局_移动端布局总结
bootstrap怎么在移动端横向布局_移动端布局总结
⼀、流式布局(百分⽐布局)
使⽤⾮固定像素来定义⽹页内容，也就是百分⽐布局，(特别适合于电商⽹站的布局)通过盒⼦的宽度设置成百分⽐来根据屏幕的宽度来进⾏伸缩，不受固定像素的限制，内容向两侧填充。这样的布局⽅式，就是移动web 开发使⽤的常⽤布局⽅式。这样的布局可以适配移动端不同的分辨率设备。
⼆、rem布局(局限条件：主要⽤来适配⼿机和ipad，除了⼿机和ipad，其他的都不能适配。)
rem布局⽅案(⽤rem这个单位来做不同⼿机的适配)是现在做⼿机端页⾯最好的。
⾸先说⼀下px、em、rem取⽤选择依据？
1.  px 像素(Pixel)，绝对单位，是相对于显⽰器屏幕分辨率⽽⾔的，是⼀个虚拟长度单位，是计算机系统的数字化图像长度单位，如果px 要换成物理长度，需要指定精度DPI。
2.  em 是相对长度单位，相对于当前对象内⽂本的字体尺⼨。如当前对象内⽂本的字体尺⼨未被⼈设置，则相对于浏览器的默认字体尺⼨。它会继承⽗级元素的字体⼤⼩，因此不是⼀个固定的值。
3.  rem 是CSS3新增的⼀个相对单位(root em，根em)，使⽤rem为元素设定字体⼤⼩时，仍然是相对⼤⼩，但相对的是HTML根元素。
4.  区别：IE⽆法调整那些使⽤px作为单位的字体⼤⼩，⽽em和rem可以进⾏缩放，rem相对的是HTML根元素，这个单位可谓集相对⼤⼩和绝对⼤⼩的优点于⼀⾝，通过它既可以做到只修改根元素就成⽐例地调整所有字体⼤⼩，⼜可以避免字体⼤⼩逐层复合的连锁反应。⽬前，除了IE8及更早版本外，所有浏览器均已⽀持rem。
rem布局中的尺⼨是怎样计算的？
本质是等⽐缩放，⼀般是基于宽度，试想⼀下假设UE图能等⽐缩放，假设我们将屏幕宽度平均分成100份，每⼀份⽤x表⽰，x=屏幕宽
度/100，如果将x作为单位，x前⾯的数值就代表屏幕宽度的百分⽐。
Document
/*⽬标：就是把box适配到常见的iphone5 三星 iphone6⼿机上*/
/*1.通过切图⼯具，我们得知 box在设计图(640px)上的⼤⼩是16*16px*/
/*2.把设计图分成20份 1份=32px*/
/*3.iphone5的宽度=320 iphone6的宽度=375 这⾥指的是设备独⽴像素*/
/*4.使⽤媒体查询*/@media screen and (width: 320px){
html {/*在320宽的屏幕中 ⼀份是16px*/font-size: 16px;/*320/20=16*/}
}/*三星*/@media screen and (width: 360px){
html {/*在360宽的屏幕中 ⼀份是18px*/font-size: 18px;/*360/20=18*/}
}
@media screen and (width: 375px){
html {/*在375宽的屏幕中 ⼀份是18.75px*/font-size: calc(375px/20);/*375/20=18.75*/}
}
生物质能源.box {/*在某⼀屏幕中的⼤⼩=元素的尺⼨/32 * 屏幕中⼀份的⼤⼩，即16/32*18或16/32*16，就能得到px为单位的*/width:0.5rem;
height:0.5rem;
background-color: red;
}
例：给了我们⼀张640px的设计图(把640px分成20份，则每份32px)
赛尔号哈克萨斯解析适配代码：
@media screen and (width: 320px){html {/*在320宽的屏幕中 ⼀份是16px*/font-size:16px;/*320/20=16*/
}}/*三星*/@media screen and (width: 360px){html {/*在360宽的屏幕中 ⼀份是18px*/font-size:18px;/*360/20=18*/
}}
@media screen and (width: 375px){html {/*在375宽的屏幕中 ⼀份是18.75px*/font-size:calc(375px/20);/*375/20=18.75*/
}}
html中，加⼊⼀个div量出来height是90px，那么应该这样写：
.box{
/*90/32意思是这个尺⼨在设计图中占了多少份*/
height:90/32rem;
}
我在⼯作中是这样⽤的：
有什么好玩的单机
给⼀个750px的设计稿
(我们这⾥所说的750px并不是绝对的，750px是iphone6的物理像素，也叫屏幕分辨率。所以这⾥只是泛指移动端设计稿是按照设备的物理像素所给。)
物理像素：顾名思义，就是设备屏幕上的实际像素，也就是说这个⼿机被出⼚造出来的时候，这个屏幕上有多少个像素点，它的物理像素就是多少。
设备独⽴像素：也叫逻辑像素(对于前端来说，和我们的css像素是⼀样的)，这个不同的设备是不⼀样的。在viewport为ideal-viewport模式时，如iphone6此时的viewport为375排序，代表着我们在css中写375px就可以达到全屏的效果。
在index.html中添加⼀段js代码
var u =navigator.userAgent;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
var isiOS = u.indexOf('iPhone') > -1; //ios终端
if(isAndroid ||isiOS) {var windowWidth =document.documentElement.clientWidth;
document.documentElement.style.fontSize= windowWidth / 7.5 + 'px';
}else{var windowWidth =document.documentElement.clientWidth;if(windowWidth > 480) {
document.documentElement.style.fontSize= 480 / 7.5 + 'px';
}else{
document.documentElement.style.fontSize= windowWidth / 7.5 + 'px';
}
}
然后只需要将设计稿量出来的长度(px)，⼩数点向左移2位，单位变成rem就好了。
还可以这样来写，添加如下代码
(function(){functionchangeRootFont(){var designWidth = 750,rem2px = 100;
武义温泉度假村
document.documentElement.style.fontsize=((window.innerWidth/designWidth)*rem2px) +'px';
//iphon6: (375/750)*100 + 'px'
}
changeRootFont();
window.addEventListener('resize',changeRootFont,false);
})();
可以看到，我们通过动态的获取设备独⽴像素，然后除以设计稿的宽度，然后赋给根字体的⼤⼩，以致来改变根字体⼤⼩，做到⾃适应。但⾄于为什么要乘100，⾸先375/750是0.5，浏览器默认最⼩字体为12px，所以我们需要放⼤⼀些，⽽100⼜很好算，然后只需要将设计稿量出来的长度(px)，⼩数点向左移2位，单位变成rem就好了。
只爱你一个三、响应式布局(使⽤媒体查询这个⼯具实现)
缝肛门事件简⽽⾔之，就是⼀个⽹站能够兼容多个终端。
CSS3中的 Media Query(媒介查询)，通过查询 screen 的宽度来指定某个宽
度区间的⽹页布局。它主要是通过查询设备的宽度来执⾏不同的 css代码，最终达到界⾯的配置。核⼼语法是：
@media screen and (max-width: 600px){ /*当屏幕尺⼨⼩于600px时，应⽤下⾯的CSS样式*/
/*你的css代码*/
}
如下所⽰：
@media screen and (width: 320px){body {
background-color:red}}
@media screen and (width: 375px){body {
background-color:green}}
由于响应式开发显得繁琐些，⼀般使⽤第三⽅响应式框架来完成，⽐如bootstrap来完成⼀部分⼯作，当然也可以⾃⼰写响应式。
bootstrap中常⽤类名：
.col-xs-*超⼩屏幕(移动设备) 768px以下
.col-sm-*⼩屏设备 768px-992px
.col-md-*中等屏幕 992px-1200px
.col-lg-*宽屏设备 1200px 以上
四、flex弹性布局
以天猫的实现⽅式进⾏说明：
它的viewport是固定的：
⾼度定死，宽度⾃适应，元素都采⽤px做单位。
随着屏幕宽度变化，页⾯也会跟着变化，效果就和PC页⾯的流体布局差不多，在那个宽度需要调整的时候使⽤响应式布局调调就⾏(⽐如⽹易新闻)，这就实现了适配。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。