css3布局（css3的响应式布局和bootstrap布局的区别是什么）

本文目录

• css3的响应式布局和bootstrap布局的区别是什么
• 如何利用css3中@media实现响应式布局
• css3怎样实现两列布局
• CSS3怎么做出响应式布局
• CSS3 可以实现响应式布局吗

css3的响应式布局和bootstrap布局的区别是什么

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，随着现在各种终端的快速发展，做出一些能够适应不同分辨率、不同平台、不同屏幕大小的网页尤为重要，这不仅使得自己的网站适应不同终端的能力更强，同时也为用户带来了良好的体验。而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。

如何利用css3中@media实现响应式布局

响应式布局，说直白点就是一个网站能够兼容多个终端，可以按不同的分辨率显示不同的状态。而实现这个就要用到css3的Media Queries（媒介查询）。这个功能非常的强大，但是有优点的同时，缺点也是会存在的。那就是兼容各种设备工作量大，效率低下，加载时间长等。但是学起来很容易，看完下面的代码你就会了。

.page{    width:960px;    height:1000px;    margin:0 auto;    background:#CCC;}/* 设备最大宽度960px */@media screen and (max-width: 960px) {    .page{        width:100%;        background:#69F;    }}/* 宽度大于480px且小于768px */@media screen and (min-width: 480px) and (max-width:768px) {    .page{        width:100%;        background:#F00;    }}/* 设备最大宽度480px */@media screen and (max-width:480px){    .page{        width:100%;        background:#00FF00;    }}

这样就可以在不同的分辨率下采取不同的样式了。

另外还有一点，如果是移动端开发，一定要在头部加上以下代码。

《meta name=“viewport“ content=“width=device-width; initial-scale=1.0“》

css3怎样实现两列布局

以下方式供参考：

html代码：

《!DOCTYPE html》《html》    《head》        《meta charset=“utf-8“》        《title》练习使用HTML《/title》        《link rel=“stylesheet“ href=“css/index.css“ /》    《/head》    《body》        《div id=“d1“》            《span》DIV《/span》        《/div》        《div id=“d2“》            《span》DIV《/span》        《/div》        《div id=“d3“》            《span》DIV《/span》        《/div》    《/body》《/html》

css代码：

#d1{    position: absolute;    width: 100px;    height: 100px;    background-color: red;}#d2{    position: absolute;    margin-left: 100px;    width: 500px;    height: 100px;    background-color: blue;}#d3{    position: absolute;    margin-top: 100px;    width: 600px;    height: 100px;    background-color: yellow;}

效果：

CSS3怎么做出响应式布局

做响应式网站离不开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的样式，响应式布局就没问题。

CSS3 可以实现响应式布局吗

响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

在我们的移动端的网页设计中，要求很高，1像素的差别就影响我们的整个页面的设计美感。所以，我们需要设配不同的手机屏幕的像素密度的页面，这样，我们就要用到viewport方法。viewport方法就是帮助我们来适配不同手机的屏幕像素密度页面。为了保证我们设计的尺寸不是真，一般会在平米密度可选择性较多的移动设备中，使用viewport技术。这是，我们viewport方法就是帮助我们的来适配不同密度的手机屏幕像素密度。这样，我们可以更好的体现我们的页面的设计美感。

《meta name=“viewport“  content=“width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no“》

实现响应式的方式

Media Query早在CSS2的时候就出现,

@media screen and (max-width:1024px) and (min-width:300px){    div{color:red;}}

可以将Media Query看成“Meida Type（判断条件） + CSS（符合条件的样式规则）”,上面代码是屏幕像素在300px-1024px下div的颜色为红色；

css3 vh

vw、vh、vmin、vmax 是一种视窗单位，也是相对单位。它相对的不是父节点或者页面的根节点。而是由视窗（Viewport）大小来决定的，单位 1，代表类似于 1%。

视窗(Viewport)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。

《!DOCTYPE html》《html》  《head》    《meta charset=“utf-8“》    《title》hangge.com《/title》    《style》      html, body, div, span, h1, h2, h3 {        margin: 0;        padding: 0;        border: 0;      }       .demo {       width: 100vw;       font-size: 5vw;       margin: 0 auto;       background-color: #50688B;       color: #FFF;      }       .demo2 {       width: 80vw;       font-size: 5vw;       margin: 0 auto;       background-color: #ff6a00;      }       .demo3 {       width: 50vw;       height: 50vh;       font-size: 1vw;       margin: 0 auto;       background-color: #ff006e;       color: #FFF;      }    《/style》  《/head》  《body》      《div class=“demo“》          《h1》宽度100％, 字体5％《/h1》      《/div》      《div class=“demo2“》          《h2》宽度80％, 字体5％《/h2》      《/div》      《div class=“demo3“》          《h3》宽度50％, 高度50％, 字体1％《/h3》      《/div》  《/body》《/html》