三步完成自适应网页设计
自适应网页设计近来很流行,如果你接触比较少请参见 responsive sites。当然,对一个新手来说可能听起来有点复杂,其实它比你想象的简单多了。这里是一个快速教程,通过学习你会自适应网页和media queries的基本原理(前提你有css基础)。
Step 1:Meta 标签
为了适应屏幕,不少移动浏览器都会把HTML页面置于较大视口宽度(一般会大于屏幕宽度),你可以使用viewport meta
标签来设定。以下viewport meta
标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放:
IE8及其更低版本不支持media query,可以使用media-queries.js或respond.js脚本实现支持。
Step 2. HTML结构
在这个例子中,页面布局包括 header
,content
,sidebar
和footer
。header
固定高度为180px
,content
宽600px
,sidebar
宽300px
。
Step 3. Media Queries
CSS3 media query是自适应网页设计的关键,他就像高级语言里的if
条件语句,告诉浏览器根据不同的视口宽度(这里等于浏览器宽度)来渲染网页。
如果视口宽度小于等于980px
,下面规则生效。
这里将容器绝对宽度改用百分比显示,让页面排版更加灵活。
/* for 980px or less */ @media screen and (max-width: 980px) { #pagewrap{ width: 94%; } #content{ width: 65%; } #sidebar{ width: 30%; } }
如果视口宽度小于等于700px
, 将#content
和#sidebar
宽度设为自动(auto
),并移除它的浮动属性(float
),这样它会变成满版显示。
/* for 700px or less */ @media screen and (max-width:700px) { #content { width: auto; float: none; } #sidebar { width: auto; float: none; } }
当视口宽度小于等于480px
时(如手机屏幕),将#header
高度设为自动,h1
的字体大小设定为24px
,并隐藏#sidebar
。
/* for 480px or less */ @media screen and (max-width:480px) { #header { height: auto; } h1 { font-size: 24px; } #sidebar { display: none; } }
同类文章排行
- 五彩纷呈的故事——民族团结心连心
- 赤峰鼎好职业技术学校2024年招生简章
- 清明书经典,缅怀先烈、弘扬文化。——赤峰鼎好职业技术学校开展清明节诗词规范书写
- 21级高铁乘务专业学生实习就业
- 共建共享健康赤峰专题讲座
- 全市职业院校书香校园建设现场会
- 晨读
- 传承高铁礼仪 我们正在路上
- 市教育局党组召开理论学习中心组“不忘初心、牢记使命”主题教育第二次专题学习研讨会
- 新学期,新气象