Bootstrap里container的响应式布局的解释

之前在用bootstrap的时候,发现其中container设置了响应式布局,然后根据逻辑自己敲了一遍.       

现在移动端越来越火,基本所有的网页都会根据移动端做一些适配,其中响应式布局,就是适配中关键的一环.其实响应式布局十分简单,通过JS原生代码,或者是@media,都可以进行响应式布局,下面我们来试试.

利用原生JS代码实现响应式布局

   其实有基础的朋友看眼代码就能理解了,所谓响应式代码就是监听了window的宽度,当宽度改变到一定程度时,布局相应的进行变化,这就是简易的响应式布局.如果认为JS原生代码很麻烦?不喜欢敲?可以,我们还可以通过媒体查询来实现.

     媒体查询实现响应式布局

@media标签,其作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。不过该标签是CSS3的,对于IE老版本(IE9-)的兼容性存在问题(为什么老是要为IE去做兼容?),所以大家用的时候注意下.其实媒体查询的逻辑和之前JS的原生代码逻辑相同,所以这里就不再叙述了

@media其实还有许多的媒体类型,比如@meida all用于所有设备,@media print用于打印设备,@media speech应用于屏幕阅读器等发声设备,@media screen 用于电脑屏幕，平板电脑，智能手机等.

你也可以直接在link里用来判断当某个尺寸时,引入某个css

这条代码意思是在大于或等于768时使用style.css.

大概的响应式布局就写到这了,很浅显却又很重要的功能,其实如果真要深入,去各类型做适配,也很麻烦,今天就写这么多吧.