网页响应式布局代码（如何编写响应式网页）

今天给各位分享网页响应式布局代码的知识，其中也会对如何编写响应式网页进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录一览：

• 1、html5怎么制作一个响应式网页？
• 2、响应式布局 怎么用css写响应式
• 3、如何把静态页面改为响应式

html5怎么制作一个响应式网页？

HTML5 制作响应式网页，首先需要考虑是全平台适配还是只是移动端适配。这里以移动端响应式网站为例，讲述如何制作响应式网页。

1、选定基本设计尺寸，一般以1080为基准。确定响应式web设计的应用场景之后，和美工（或设计师）沟通，之前，一般需要美工出几套主流移动设备屏幕分辨率的设计图，现在，使用流式布局以及rem等可以使用一套设计图，以最常用的移动设备屏幕分辨率为基准。

2、当美工完成设计图之后，前端工程师的工作就开始了。这时你就可以使用PS或是FW进行切图了。一般说来，Fireworks cs6切图更快，但是Fireworks有时会有图片失真的情况发生，所以，有时需要使用PS进行配合，PS有切片工具可以专门用来切图。

具体代码：

(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';

};

响应式布局 怎么用css写响应式

做响应式网站离不开CSS响应式布局查询代码写法，而在此之前，我们需要了解什么是媒体查询以及如何才CSS中引入媒体查询。

什么是媒体查询？

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设定CSS样式，媒体查询由媒体类型和一个或多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height和color（等）。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。

如何在CSS中引入媒体查询？

媒体查询写在CSS样式代码的最后，CSS是层叠样式表，在同一特殊性下，靠后的的样式会重叠前面的样式。

如何用CSS做响应式布局呢？

1、在HTML头部添加以下代码，用来显示兼容移动设备的显示效果。

meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /

参数详解：

width=device-width ：宽度等于当前设备的宽度

initial-scale=1 ：初始的缩放比例（默认为1）

minimum-scale=1 ：允许用户缩放到的最小比例（默认为1）

maximum-scale=1 ：允许用户缩放到的最大比例（默认为1）

user-scalable=no ：用户是否可以手动缩放（默认为no）

2、引入包含Media的CSS文件

一般情况HTMLCSS代码都是分开写的，Media也不例外。

link rel="stylesheet" type="text/css" href="m320.css" media="only screen and (max-width:320px)"/

link rel="stylesheet" type="text/css" href="m480.css" media="only screen and (min-width:321px) and (max-width:375px)"/

3、写Media中的代码

以某个网页的响应式布局为例

结构:@media设备类型and (设备特性)｛样式代码｝

/*媒体查询*/

/*当页面大于1200px时，大屏幕，主要是PC端*/

@media (min-width: 1200px) {

}

/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/

@media (min-width: 992px) and (max-width: 1199px) {

#adver .center {

width: 50%;

margin: -10px 0 0 -25%;

}

main .center h2 {

font-size: 40px;

}

}

/*768和991像素之间的屏幕里，小屏幕，主要是PAD*/

@media (min-width: 768px) and (max-width: 991px) {

#adver .center {

width: 60%;

margin: -10px 0 0 -30%;

}

#adver .search, #adver .button {

font-size: 20px;

}

main .center h2 {

font-size: 35px;

}

}

/*在480和767像素之间的屏幕里，超小屏幕，主要是手机*/

@media (min-width: 480px) and (max-width: 767px) {

header, header .center, header .link {

height: 45px;

}

header .logo, .sm-hidden,.sidebar,.md-hidden {

display: none;

}

header .link {

width: 100%;

line-height: 45px;

}

#adver {

padding: 45px 0 0 0;

}

#adver .center {

width: 70%;

height: 53px;

margin: -10px 0 0 -35%;

}

#adver .search, #adver .button {

height: 45px;

font-size: 18px;

}

.sm-visible {

display: block;

}

main .center h2 {

font-size: 30px;

}

main .center p {

font-size: 15px;

}

main figure {

width: 49.2%;

}

}

/*在小于480像素的屏幕，微小屏幕，更低分辨率的手机*/

@media (max-width: 479px) {

header, header .center, header .link {

height: 45px;

}

header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden {

display: none;

}

header .link {

width: 100%;

line-height: 45px;

}

header .link li {

width: 25%;

}

#adver {

padding: 45px 0 0 0;

}

#adver .center {

width: 80%;

height: 48px;

margin: -10px 0 0 -40%;

}

#adver .search, #adver .button {

height: 40px;

font-size: 16px;

}

.sm-visible {

display: block;

}

footer .bottom, footer .version {

font-size: 13px;

}

main .center h2 {

font-size: 26px;

}

main .center p {

font-size: 14px;

}

main figure {

width: 99%;

}

}

响应式布局的原理就是在不同的窗口大小下显示不同的结构和样式。只要掌握好CSS的样式，响应式布局就没问题。

如何把静态页面改为响应式

如今，一个网站只在桌面屏幕上好看是远远不够的，同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸，自动响应客户端尺寸变化。这篇文章将展示如何通过3个简单的步骤轻松地使网站变成响应式（Responsive）。

1 – 布局

当创建一个响应式网站，或让现有的网站变成响应式的，首先要关注的元素的布局。我在建立响应式的网站，总是先创建一个非响应的布局，页面宽度固定大小。如果非响应版本完成得非常不错，我再添加媒体查询（Media Queries）和响应式代码。这种操作方式更容易实现响应式特性，在同一时间专注于一个任务。

当你已经完成了无响应的网站，做的第一件事是在你的 HTML 页面，粘贴下面的代码到和标签之间。这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

现在是时候添加一些媒体查询了。根据 W3C 网站，媒体查询由媒体类型和零个或多个媒体查询的条件表达式组成。通过使用媒体查询，外观呈现可以针对特定范围内的输出设备，而不需要改变内容本身。换句话说，媒体查询让您的网站在各种各种显示器上看起来都很好，从小的智能手机到大的电脑屏幕等等。

媒体查询取决于你的网站布局，所以对我来说为您提供一个现成可以使用的代码片段有点困难。但是，下面的代码对于大多数网站都是一个很好的起点。在这个例子中，#primary 是主要内容区域，#secondary 是侧栏。

从代码中你可以看到，我定义了两种规格：首先有一个最大宽度为1060px，为平板电脑优化的横向显示。#primary 占在其父容器宽度的67%，#senondary 占30%，再加上3%的左外边距。 第二个规格是用于平板电脑和更小的屏幕尺寸。

由于智能手机的屏幕尺寸小，我决定给 #primary 设置100%的宽度，#secondary 也设置100%的宽度，他将在 #primary 下面。 正如我已经说过的，你可能必须要对这段代码位进行修改才能适应您的网站的具体需求。

2 、媒体

一个响应式的布局是实现响应网站的第一步。现在，让我们把注意力集中在另外一个现代化网站非常重要的方面：媒体，如视频或图像。 下面的 CSS 代码将确保您的图像将永远不会大于他们的父容器，代码非常简单，适用于大多数网站。请注意，IE6 等旧的浏览器不支持 max-width 指令。

关于网页响应式布局代码和如何编写响应式网页的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。