• 心动官网已成功升级到全新模板,还在持续优化中,感谢大家长久以来的支持!
  • 全新主题,全新体验,流畅到爆!有BUG欢迎及时提出!
  • 已停用又拍云,本站无经济收入,无法续费坚持下去使用CDN……
  • 时间太久的文章中失效链接已清除,如发现没有链接的,那么就是已失效的!
  • 幻灯片出现BUG,心动正在寻找替换方案。

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

学习教程 心动 3个月前 (08-09) 194次浏览 已收录 8个评论 扫描二维码

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

一、开启页面自适应

<!-- 在<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吧。

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


心动博客 , 版权所有丨如未注明 , 均为原创丨本网站采用WordPress制作
转载请注明原文链接:【干货】如何让HTML页面自适应?全语言通用!
喜欢 (0)
关于作者:

要想成功,你必须自己制造机会,绝不能愚蠢地坐在路边,等待有人经过,邀请你同往财富与幸福之路。——歌夫

发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 感谢心动,真的专门写出来了!大致明白什么意思了,看来真的要下去好好看看media query布局了。 8-) 8-)
    宅小猫2017-08-10 13:22 Reply Windows 7 | Chrome 59.0.3071.115
    • :evil: 客气客气,举手之劳!
      心动2017-08-10 13:28 Reply Windows 10 | Chrome 60.0.3112.90
  2. 厉害了,我的哥。不过还没试试,等下试试。
    赚钱小站2017-08-10 11:38 Reply Windows 7 | Chrome 50.0.2661.102
    • :evil: 感谢支持!
      心动2017-08-10 12:06 Reply Windows 10 | Chrome 60.0.3112.90
  3. 前端工程师大牛的菜
    在线看小说2017-08-10 10:11 Reply Mac OS X | Safari浏览器 602.1
    • :-o 其实很简单啦!
      心动2017-08-10 12:06 Reply Windows 10 | Chrome 60.0.3112.90
  4. 哈哈哈,真漂亮界面。。。
    天津网站建设2017-08-10 01:31 Reply Mac OS X | Chrome 55.0.2883.95
    • 哈哈恍恍惚惚……
      心动2017-08-10 12:06 Reply Windows 10 | Chrome 60.0.3112.90