css响应式代码（响应式布局css）

本篇文章给大家谈谈css响应式代码，以及响应式布局css对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、响应式布局 怎么用css写响应式
• 2、11.CSS布局篇之响应式——rem
• 3、如何用一简单的CSS制作响应式HTML网页
• 4、12.CSS布局篇之响应式——vw/vh
• 5、如何把静态页面改为响应式

响应式布局 怎么用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的样式，响应式布局就没问题。

11.CSS布局篇之响应式——rem

rem是什么？

px，绝对长度单位，最常用

em，相对长度单位，相对于父元素，不常用

rem，相对长度单位，相对于根元素，常用于响应式布局

响应式布局的常用方案

media-query,根据不同屏幕宽度设置根元素font-size

rem,基于根元素的相对单位

rem的弊端：“阶梯性”

如何用一简单的CSS制作响应式HTML网页

建议展开阅读

新人如果想快速开发出响应式网站建议使用响应式框架Bootstrap,Foundation等等......

三个部分[Viewport][网格视图][媒体查询]

1.先在head里面设置Viewport

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

用户可以通过平移和缩放来看网页的不同部分。

2.很多响应式都基于网格视图设计

响应式网格视图通常是 12 列，宽度为100%，在网页自动伸缩

比如CSS里面写

* {

    box-sizing: border-box;

}

[class*="col-"] {

    float: left;

    padding: 15px;

}

.col-1 {width: 8.33%;}

.col-2 {width: 16.66%;}

.col-3 {width: 25%;}

.col-4 {width: 33.33%;}

.col-5 {width: 41.66%;}

.col-6 {width: 50%;}

.col-7 {width: 58.33%;}

.col-8 {width: 66.66%;}

.col-9 {width: 75%;}

.col-10 {width: 83.33%;}

.col-11 {width: 91.66%;}

.col-12 {width: 100%;}

这样即可在html写

div class="row"

div class="col-3"

ul

li标题1/li

li标题2/li

li标题3/li

li标题4/li

/ul

/div

div class="col-9"

h12333333/h1

p2333333333333333333333333333333333333333333333333333333333333333333333333333333333333333/p

p2333333333333333333333333333333333323333333333/p

/div

达到简单的响应式效果[拖拽浏览器大小查看]

图片响应式方法

div {

width: 100%;

height: 400px;

background-image: url('url');

background-repeat: no-repeat;

background-size: contain;

border: 1px solid red;

}

background-size 属性设置为 "contain", 图片比例会自动缩放。

3.媒体查询主要用于针对不同的媒体类型定义不同的样式

比如我在电脑显示图片1,但是在手机显示的是图片2

详细可以私信我

12.CSS布局篇之响应式——vw/vh

网页视口尺寸

window.screen.height //屏幕高度，667

window.innerHeight //网页视口高度，553

document.body.clientHeight //body高度，网页内容的高度根据网页内容决定

vh网页视口高度的1/100

vw网页视口宽度1/100

vmax取两者（vh/vw）最大值

vmin取两者（vh/vw）最小值

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

如今，一个网站只在桌面屏幕上好看是远远不够的，同时也要在平板电脑和智能手机中能够良好呈现。响应式的网站是指它能够适应客户端的屏幕尺寸，自动响应客户端尺寸变化。这篇文章将展示如何通过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 指令。

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