三步完成自适应网页设计

自适应网页设计近来很流行,如果你接触比较少请参见 responsive sites。当然,对一个新手来说可能听起来有点复杂,其实它比你想象的简单多了。这里是一个快速教程,通过学习你会自适应网页和media queries的基本原理(前提你有css基础)。

Step 1:Meta 标签 (查看演示: demo

为了适应屏幕,不少移动浏览器都会把HTML页面置于较大视口宽度(一般会大于屏幕宽度),你可以使用viewport meta标签来设定。以下viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

IE8及其更低版本不支持media query,可以使用 media-queries.js或 respond.js脚本实现支持。

<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

Step 2. HTML结构

在这个例子中,页面布局包括 header, content container, sidebar, 和 footer。header固定高度为180px, content container宽600px,sidebar宽300px。

Step 3. Media Queries

CSS3 media query是自适应网页设计的关键,他就像高级语言里的if条件语句,告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。

如果视口宽度小于等于980px,下面规则生效。

这里将容器像素宽度该用百分比,页面排版更加灵活。

如果视口宽度小于等于700px, 将#content 和#sidebar 宽度设为自动(auto width),并移除它的浮动属性(float),这样它会变成满版显示。

当视口宽度小于等于480px时(如手机屏幕),将#header高度设为自动,h1 的字体大小设定为24px,并隐藏#sidebar。

根据你的喜好,可以定义更多的media queriey条件

小结

这里只是一个快速教程,更多可以参见使用CSS3 Media Queries实现网页自适应

转载于:https://my.oschina.net/jinxf/blog/528980

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值