css3布局？css3应用
这篇文章给大家聊聊关于css3布局，以及css3应用对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
CSS3布局方式有哪些
1.静态布局
——最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景
实现方式：PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。
缺点:在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。
实践案例：Float布局、绝对布局
2.自适应布局
——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。
注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
3.流失布局（百分比布局%）
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域(viewport)和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”
注：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
主要实践案例：左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局
4.响应式布局（媒体查询）
——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。
注：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
5.弹性布局
——rem/em、flex布局
CSS3 可以实现响应式布局吗
响应式布局就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
在我们的移动端的网页设计中，要求很高，1像素的差别就影响我们的整个页面的设计美感。所以，我们需要设配不同的手机屏幕的像素密度的页面，这样，我们就要用到viewport方法。viewport方法就是帮助我们来适配不同手机的屏幕像素密度页面。为了保证我们设计的尺寸不是真，一般会在平米密度可选择性较多的移动设备中，使用viewport技术。这是，我们viewport方法就是帮助我们的来适配不同密度的手机屏幕像素密度。这样，我们可以更好的体现我们的页面的设计美感。
<metaname="viewport"content="width=device-width,maximum-scale=1,minimum-scale=1,initial-scale=1,user-scalable=no">实现响应式的方式
Media Query早在CSS2的时候就出现,
@mediascreenand(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)是你的浏览器实际显示内容的区域—，换句话说是你的不包括工具栏和按钮的网页浏览器。
<!DOCTYPEhtml>
<html>
<head>
<metacharset="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:0auto;
background-color:#50688B;
color:#FFF;
}
.demo2{
width:80vw;
font-size:5vw;
margin:0auto;
background-color:#ff6a00;
}
.demo3{
width:50vw;
height:50vh;
font-size:1vw;
margin:0auto;
background-color:#ff006e;
color:#FFF;
}
</style>
</head>
<body>
<divclass="demo">
<h1>宽度100％,字体5％</h1>
</div>
<divclass="demo2">
<h2>宽度80％,字体5％</h2>
</div>
<divclass="demo3">
<h3>宽度50％,高度50％,字体1％</h3>
</div>
</body>
</html>
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" rel="external nofollow" href="m320.css" media="only screen and(max-width:320px)"/>
<link rel="stylesheet" type="text/css" rel="external nofollow" 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布局和css3应用的问题到这里结束啦，希望可以解决您的问题哈！