HTML5实践 -- 三步实现响应式设计

简介:   转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/25/2787559.html     响应式web设计现在已经不是一个难事了,如果你还不熟悉他,可以参看我的文章《HTML5实践 -- 流式响应式设计》。

  转载请注明原创地址:http://www.cnblogs.com/softlover/archive/2012/11/25/2787559.html

 

  响应式web设计现在已经不是一个难事了,如果你还不熟悉他,可以参看我的文章《HTML5实践 -- 流式响应式设计》。如果你是一个初学者,可能响应式设计对你来说有点发杂,但实际上他比你想象的要简单的多。为了方便你更快的学习响应式设计,我特意写了这个教程,通过简单的三个步骤你就能掌握响应式设计的基本逻辑和media queries(假设你掌握css知识)。

  demo预览地址:http://webdesignerwall.com/demo/responsive-design/index.html

 

  步骤 1. Meta标签

  大多数mobile浏览器,会将页面的宽度调整至viewport宽度,用以适应屏幕显示。这里我们会使用到viewport标签,例如下面的语句将添加在<head>之间,告诉浏览器使用设备的宽度作为viewport的宽度,取消initial scale的功能。

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

  IE8和之前的浏览器不支持media query,我们需要使用 media-queries.js 或者 respond.js 实现ie浏览器对media query的支持。

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

 

  步骤2. HTML结构

  在这个例子中,我有一个基本的页面结构,包含header, content container, sidebar 和 footer。header的高度固定为180px,content container 的宽度为600px,sidebar 的宽度为300px。

 

  步骤 3. Media Queries

  CSS3 media query 是响应式设计所使用的技巧,他就像是在写条件语句,告诉浏览器在特定viewport宽度下如何展示页面。

  例如,下面的命令将会在viewport的宽度等于或者小于980px的时候起作用。一般而言,我会用百分比的数值,而不是像素值来设置容器的宽度,这样可以实现流式布局的效果。

  当viewport等于或者小于700px的时候,设置 #content 和 #sidebar 的宽度为auto,并且移除 float, 这样他们会以全部宽度方式显示。

  对于480px或者更小的mobile屏幕,设置#header的高度为自动,h1得字体大小为24px,同时隐藏#sidebar。

  你可以根据需要添加很多media query,在我的demo中我只添加了三个media query。media query的目的针对特定viewport的宽度,使用不同的css实现页面布局。media query可以在一个css文件中,也可以分布在几个css文件中。

 

  总结

  本教程的目的是,向你展示响应式设计的基本要素,如果你想了解更多细节,可以参看我的文章《HTML5实践 -- 使用CSS3 Media Queries实现响应式设计》。

 

  原文地址:http://webdesignerwall.com/tutorials/responsive-design-in-3-steps

 

HTML5实践系列

目录
相关文章
|
5月前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
206 0
|
3月前
|
移动开发 HTML5
响应式精品资源导航源码html5
一款响应式精品网站推荐导航源码,可以自己修改代码替换图标图片和指向网址。背景图支持自动替换,背景图可以在images中修改,本地双击html即可查看效果
43 2
响应式精品资源导航源码html5
|
7月前
|
移动开发 前端开发 HTML5
HTML5作业(六)-----响应式放大悬浮菜单
本实验旨在熟悉CSS3的transition动画和阴影效果,任务是创建一个响应式放大悬浮菜单。当鼠标悬停在菜单上时,菜单会放大并添加立体阴影。代码示例包括设置背景色、字体样式、flex布局以及菜单项的样式和过渡效果。HTML结构包含导航菜单的链接,应用了外部CSS文件中的样式。
70 0
|
4月前
|
前端开发 JavaScript
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
HTML+CSS新技能:快速打造响应式步骤条,秒变网页设计达人!
|
4月前
|
存储 移动开发 JavaScript
html5手机Web单页应用实践--起点移动阅读
html5手机Web单页应用实践--起点移动阅读
|
7月前
|
设计模式 前端开发 Java
Java与HTML的深度融合:技术解析与应用实践
Java与HTML的深度融合:技术解析与应用实践
443 1
|
7月前
|
存储 移动开发 前端开发
使用HTML5和CSS3构建现代网页:技术详解与实践
【5月更文挑战第28天】本文详细介绍了使用HTML5和CSS3构建现代网页的技术与实践。HTML5新增语义化标签、多媒体支持、本地存储和表单验证等功能,提升了网页开发效率和用户体验。CSS3则带来了更多选择器、盒模型改进、背景与边框样式以及动画过渡效果,使网页设计更具视觉冲击力。通过实例展示了如何结合两者创建结构清晰、交互丰富、响应式的现代网页。
|
7月前
|
移动开发 缓存 前端开发
【专栏:HTML与CSS实践篇】网页性能优化:CSS与HTML的最佳实践
【4月更文挑战第30天】本文探讨了优化CSS和HTML以提升网页性能的最佳实践。HTML优化包括:精简结构、压缩代码、异步加载脚本和利用缓存。CSS优化则涉及:精简代码、合并文件、使用CSS Sprite、善用CSS3属性、避免@import及响应式设计。这些方法能加快加载速度,改善用户体验。
92 6
|
7月前
|
移动开发 前端开发 JavaScript
:掌握移动端开发:HTML5 与 CSS3 的高效实践
:掌握移动端开发:HTML5 与 CSS3 的高效实践 “【5月更文挑战第6天】”
99 1
|
7月前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
120 4
下一篇
DataWorks