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实现动态视频背景

详解HTML5之pushstate、popstate操作history无刷新改变当前url代码实例

HTML5与html区别是什么

零基础学习HTML5

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

HTML5的头部head的详解

字符编码是什么?HTML5如何设置字符编码?

HTML5关于web sql数据库的详细介绍

如何使用canvas画出平滑的曲线?(代码)

HTML5讲解之拖拽事件dragstart、drag和dragend

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




打赏

取消

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

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

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

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

评论

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