HTML5实践-三步实现响应式设计的详细介绍


本文摘自PHP中文网,作者黄舟,侵删。

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

  步骤 1. Meta标签

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

1

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

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

1

2

3

<!--[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。

阅读剩余部分

相关阅读 >>

HTML5多媒体audio和video详细介绍(一)

h5实现桌面通知以及提示功能的实例

h5在canvas中实现自定义路径动画

HTML5 datalist标签的用法是什么?这里有datalist标签的用法实例

HTML5开发手机应用-详细介绍viewport的作用(图文)

总结HTML5中的标签

h5的video如何实现以及操作弹幕

HTML5 canvas用来绘制弧形的代码实现

HTML5的geolocation地理位置定位api使用方法详解

使用h5实现react拖拽排序组件的方法(附代码)

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...