html5 怎么制作响应式网页

Posted 2023-04-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html5 怎么制作响应式网页相关的知识，希望对你有一定的参考价值。

步骤1 创建空白的html 5模版
首先，我们创建一个空白的模版，代码很简单，如下所示：

复制代码
步骤2 增加HTML 5新标签 HTML 5中新增加了不少标签，如：
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在页面模版中，我们需要确保每个区域都能正确地对齐，因此需要使用HEADER、 NAVIGATION、 CONTENT、 SIDEBAR和Footer这些标签。代码如下所示：

复制代码
读者可能留意到这里使用的div id=”wrapper”，这个是稍候用来做meida query的时候调整全局CSS样式调整用的步骤3 往HTML 5标签中增加代码
1）首先往标题中增加如下代码：

　Simple HTML5 Template

复制代码
2）往导航标签中添加如下代码，这样很方便地构件了一个简单的页面分类导航：

Home About Parent Page Child
One Child Two with child Child One Child
Two Child Three Child Three
Contact

复制代码
3）使用标签来描述每一个要展示的内容实体,比如要展示的是多篇文章列表,其中的每一篇文章的具体内容就可以使用标签了。如下代码所示：

This is a title for post
Richard KS 20th March 2013 Tutorials HTML5, CSS3
and Responsive 10 Comments Lorem
Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry\'s standard dummy text ever since the
1500s

复制代码
4）添加标签 HTML5提供的元素标签用来表示当前页面或文章的附属信息部分，可以包含与当前页面或主要内容相关的引用、侧边栏、广告、nav元素组，以及其他类似的有别与主要内容的部分。
根据目前的规范，元素有两种使用方法：

被包含在中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的引用、词汇列表等。

在之外使用，作为页面或站点全局的附属信息部分；最典型的形式是侧边栏(sidebar)，其中的内容可以是友情链接、附属导航或广告单元等。

代码如下：

Categories Category 1 Category 2
Parent Category Child One Child Two
Grandchild One Grandchild Two Grandchild Three
Child Three Category 3
Text Lorem Ipsum is simply dummy
text of the printing and typesetting industry.

复制代码
5）加上最后的标签，代码为：

Copyright@ 2013 HTML5.com Privacy Policy - About Us

复制代码
步骤4 增加CSS样式
首先创建一个空白的样式，如下：

[/code] 然后在http://necolas.github.com/normalize.css/中下载这个css,然后将其内容复制到该空白的文件中代码如下： [code]body
font-family: arial, sans-serif;
font-size: 100%; /* best for all browser using em */
padding:0;
margin:0;

*, html line-height: 1.6em;
article img width:auto; max-width:100%; height:auto;
.sidebar a, article a, header a, footer a color: #C30;
header a text-decoration: none;
#wrapper
font-size: 0.8em; /* 13px from 100% global font-size */
max-width: 960px; /* standard 1024px wide */
margin: 0 auto;

/* css for */
header padding: 1em 0; margin: 0px; float: left; width: 100%;

header hgroup width: 100%; font-weight:normal;
/* css for */
nav
display: block; margin: 0 0 2em; padding: 0px;
float: left; width: 100%; background-color: #181919;

nav ul ul display: none;
nav ul li:hover > ul display: block;
nav
ul padding: 0; list-style: none; position:
relative; display: inline-table; z-index: 9999;
margin: 0px; float: left; width: 100%;

nav ul:after content: ""; clear: both; display: block;
nav ul li float: left;
nav ul li:hover a color: #fff;
nav
ul li a display: block; padding: 1em; font-size:
1.125em; color: #ccc; text-decoration: none;
margin: 0px; background-color: #000; border-right: 1px
solid #333;

nav ul li:last-of-type a border-right: 1px solid transparent !important;
nav
ul ul background: #5f6975; border-radius: 0px;
padding: 0; position: absolute; top: 100%; width:
auto; float: none;

nav ul li:hover background: #5f6975; color: #FFF;

nav ul ul li a:hover background-color: #4b545f;

nav ul ul li
float: none;
border-bottom: 1px solid #444240;
position: relative;

nav ul ul li a
padding: 0.5em 1em;
font-size: 1em;
width:10em;
color: #fff;

nav ul ul ul
position: absolute; left: 100%; top:0;

/* css for */
section.content width: 70%; float:left;
.content article width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd;
article .entry clear:both; padding: 0 0 1em;
h1.post-title font-size: 1.8em; margin:0; padding:0;
.entry.post-meta color: #888;
.entry.post-meta span padding: 0 1em 0 0;
.entry.post-content font-size: 1.125em; margin:0; padding:0;
/* css for */
aside.sidebar width: 25%; float:right;
aside.sidebar ul width:100%; margin: 0px; padding: 0px; float: left; list-style: none;

aside.sidebar
ul li width:100%; margin: 0px 0px 2em; padding:
0px; float: left; list-style: none;

aside.sidebar ul li ul li margin: 0px 0px 0.2em; padding: 0px;

aside.sidebar
ul li ul li ul li margin: 0px; padding: 0px 0px 0px
1em; width: 90%; font-size: 0.9em;

aside.sidebar
ul li h3.widget-title width:100%; margin: 0px;
padding: 0px; float: left; font-size: 1.45em;

/* css for */
footer width: 98%; float:left; padding: 1%; background-color: white; margin-top: 2em;

footer .footer-left width: 45%; float:left; text-align:left;
footer .footer-right width: 45%; float:right; text-align:right;
复制代码
步骤5 为移动应用使用@media query查询为了进行响应式设计，最佳的方案是使用@media query去进行查询，在上面的CSS代码中添加如下代码：

/* ipad 768px */
@media only screen and (min-width:470px) and (max-width:770px)
body background-color: red; #wrapper width:96%; font-size: 0.6875em;
section.content, aside.sidebar width:100%;

/* iphone 468px */
@media only screen and (min-width:270px) and (max-width:470px)
body background-color: yellow; #wrapper width:96%; font-size: 0.6875em;
section.content, aside.sidebar width:100%;

复制代码
步骤6 增加jquery,modernizer和html5shiv到标签中这里推荐使用Modernizr 和html5shiv，它们都是一个能在多种浏览器中通过运行各种脚本兼容运行支持大部分HTML 5标签的插件。我们将它们和jQuery库放在标签前，代码如下：

0
复制代码参考技术A HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。
这里以移动端响应式网站为例，讲述如何制作响应式网页。
1、选定基本设计尺寸，一般以1080为基准
确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。
2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。
3、使用CSS媒体查询和rem
(function (doc, win)
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function ()
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
;

if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
)(document, window);
4、将绝对单位换算为rem
详细内容请参考我写的百度经验：
http://jingyan.baidu.com/article/f00622283bf7dffbd3f0c8b8.html 参考技术B html5页面简单的可以自己做一下就可以了
复杂的就麻烦点了，如果做不出来可能还是技术不到位参考技术C

其实用到的只是css3的media query，根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。

给你个案例模板，附件。

望采纳，谢谢！

本回答被提问者和网友采纳