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>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
响应式布局，说直白点就是一个网站能够兼容多个终端，可以按不同的分辨率显示不同的状态。而实现这个就要用到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">
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">
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
