【干货】如何让HTML页面自适应?全语言通用!

        心动在回访宅小猫博客后,小猫问起心动如何自适应?其实很简单,但是我还是想详细说下,因为对于新手来说,误区很多,并且写出来的页面都是很难看~自己都惨不忍睹,不过不要灰心,因为心动也是从那时过来的,生命在于折腾,在于学习嘛~大家一起加油!

一、开启页面自适应

<!-- 在<head>里写 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

二、手机端与PC端显示的不同方式

提示:一种使用media query的网格布局,通过media query判断屏幕大小来呈现不同效果。bootstrap就是其中代表
还有一种是使用rem布局,这种做法可以实现对设计图的一比一还原。淘宝,网易都是使用该方法。

这里心动简单说下CSS3的media query的网格布局,我们就用bootstrap来做例子。

其实理解栅栏模式之后,自适应功能就简单很多了,根据浏览器的大小,Boostrap有四种栅栏类名提供使用,用法与Css样式表类名选择器样式调用是一样的:

xs:col-xs-1 ~ col-xs-12,多列始终在一行内。
sm:col-sm-1 ~ col-sm-12,多列在浏览器像素宽度大于等于768px时才在一行内。
md:col-md-1 ~ col-md-12,多列在浏览器像素宽度大于等于992px时才在一行内。
lg:col-lg-1 ~ col-lg-12,多列在浏览器像素宽度大于等于1200px时才在一行内。

我贴一段伪代码:

<div class="row">
   <div class="col-sm-4  col-md-1"></div>
   <div class="col-sm-4  col-md-1"></div>
    <div class="col-sm-4  col-md-10"></div>
</div>

这段的意思是当浏览器的宽度在768——992之间时,采取4:4:4的模式呈现,当浏览器宽度大于992时,就按1:1:10的模式呈现。当然你也可以四种都是用,细分的在仔细点,不管怎么样,Boostrap会根据浏览器的宽度自动分配列宽度,从而匹配你所想要的呈现模式。至于它怎么做到的,你不用关心,你只需要考虑你在手机上的网页呈现样式,或者PC上的呈现样式的设计就行了,接下来,就交给Boostrap吧。

心动博客 , 版权所有丨如未注明 , 均为原创丨未经允许,禁止转载
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到
(8)条精彩评论:
  1. <a href='http://blog.skillcat.me' rel='external nofollow' class='url'>宅小猫</a>
    感谢心动,真的专门写出来了!大致明白什么意思了,看来真的要下去好好看看media query布局了。 8-) 8-)
    宅小猫2017-08-10 13:22 回复来自天朝的朋友谷歌浏览器 Windows 7 江西省九江市 电信
    • <a href='https://www.520xd.top' rel='external nofollow' class='url'>心动</a>
      :evil: 客气客气,举手之劳!
      心动2017-08-10 13:28 回复来自天朝的朋友谷歌浏览器 Windows 10 甘肃省 电信
  2. <a href='http://zhuanqianxiaozhan.com' rel='external nofollow' class='url'>赚钱小站</a>
    厉害了,我的哥。不过还没试试,等下试试。
    赚钱小站2017-08-10 11:38 回复来自天朝的朋友谷歌浏览器 Windows 7 福建省泉州市 联通
    • <a href='https://www.520xd.top' rel='external nofollow' class='url'>心动</a>
      :evil: 感谢支持!
      心动2017-08-10 12:06 回复来自天朝的朋友谷歌浏览器 Windows 10 甘肃省 电信
  3. <a href='http://www.weilishi.org/book/xiaoshuo.html' rel='external nofollow' class='url'>在线看小说</a>
    前端工程师大牛的菜
    在线看小说2017-08-10 10:11 回复来自天朝的朋友Safari浏览器 iPhone iPhone OS 10_3_3 like Mac OS X) AppleWebKit 陕西省西安市 移动
    • <a href='https://www.520xd.top' rel='external nofollow' class='url'>心动</a>
      :-o 其实很简单啦!
      心动2017-08-10 12:06 回复来自天朝的朋友谷歌浏览器 Windows 10 甘肃省 电信
  4. <a href='http://www.pangukj.com' rel='external nofollow' class='url'>天津网站建设</a>
    哈哈哈,真漂亮界面。。。
    天津网站建设2017-08-10 01:31 回复来自天朝的朋友谷歌浏览器 Mac OS X 10_12_0 北京市 北京北大方正宽带网络科技有限公司
    • <a href='https://www.520xd.top' rel='external nofollow' class='url'>心动</a>
      哈哈恍恍惚惚……
      心动2017-08-10 12:06 回复来自天朝的朋友谷歌浏览器 Windows 10 甘肃省 电信