一、静态布局
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
margin: 0;
width: 100%;
}
.container{
width: 1200px;
margin: 0 auto;
height: 2000px;
background: #f00;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
设计：
布局元素居中布局，设置width固定宽度。
二、流式布局
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
margin: 0;
width: 100%;
}
.container{
max-width: 1920px;
min-width: 1200px;
width: 100%;
height: 50vw;
min-height: 600px;
margin: 0 auto;
background: #f00;
}
.box{
float: left;
width: 20%;
height: 40%;
background: #00f;
box-sizing: border-box;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
设计：
布局元素宽度使用百分比并使用min-width或max-width限制，高度使用vw并使用min-height或max-height限制使布局元素长宽比一致。
内容元素使用百分比。
使整体布局一致。流式布局代表：栅格系统。
三、自适应布局
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
margin: 0;
width: 100%;
}
.container{
margin: 0 auto;
background: #f00;
height: 700px;
width: 100%;
}
@media (min-width: 576px) {
.container{
width: 540px;
}
}
@media (min-width: 768px) {
.container{
width: 720px;
}
}
@media (min-width: 992px) {
.container{
width: 960px;
}
}
@media (min-width: 1200px) {
.container{
width: 1140px;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
设计：
使用媒体查询在不同断点适用不同静态布局。
四、响应式布局
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
margin: 0;
width: 100%;
}
.container{
margin: 0 auto;
background: #f00;
height: 700px;
width: 100%;
font-size: 0px;
}
.box{
background: #00f;
height: 100px;
display: inline-block;
box-sizing: border-box;
border: 1px solid;
}
.xs-1{width: 8.333%}
.xs-2{width: 16.666%}
.xs-3{width: 25%}
.xs-4{width: 33.333%}
.xs-5{width: 25%}
.xs-6{width: 50%}
.xs-7{width: 41.666%}
.xs-8{width: 58.333%}
.xs-9{width: 66.666%}
.xs-10{width: 83.333%}
.xs-11{width: 91.666%}
.xs-12{width: 100%}
@media (min-width: 576px) {
.container{
width: 540px;
}
.sm-1{width: 8.333%}
.sm-2{width: 16.666%}
.sm-3{width: 25%}
.sm-4{width: 33.333%}
.sm-5{width: 25%}
.sm-6{width: 50%}
.sm-7{width: 41.666%}
.sm-8{width: 58.333%}
.sm-9{width: 66.666%}
.sm-10{width: 83.333%}
.sm-11{width: 91.666%}
.sm-12{width: 100%}
}
@media (min-width: 768px) {
.container{
width: 720px;
}
.md-1{width: 8.333%}
.md-2{width: 16.666%}
.md-3{width: 25%}
.md-4{width: 33.333%}
.md-5{width: 25%}
.md-6{width: 50%}
.md-7{width: 41.666%}
.md-8{width: 58.333%}
.md-9{width: 66.666%}
.md-10{width: 83.333%}
.md-11{width: 91.666%}
.md-12{width: 100%}
}
@media (min-width: 992px) {
.container{
width: 960px;
}
.lg-1{width: 8.333%}
.lg-2{width: 16.666%}
.lg-3{width: 25%}
.lg-4{width: 33.333%}
.lg-5{width: 25%}
.lg-6{width: 50%}
.lg-7{width: 41.666%}
.lg-8{width: 58.333%}
.lg-9{width: 66.666%}
.lg-10{width: 83.333%}
.lg-11{width: 91.666%}
.lg-12{width: 100%}
}
@media (min-width: 1200px) {
.container{
width: 1140px;
}
.xl-1{width: 8.333%}
.xl-2{width: 16.666%}
.xl-3{width: 25%}
.xl-4{width: 33.333%}
.xl-5{width: 25%}
.xl-6{width: 50%}
.xl-7{width: 41.666%}
.xl-8{width: 58.333%}
.xl-9{width: 66.666%}
.xl-10{width: 83.333%}
.xl-11{width: 91.666%}
.xl-12{width: 100%}
}
</style>
</head>
<body>
<div class="container">
<div class="box lg-2 md-4 sm-6 xs-12"></div>
<div class="box lg-2 md-4 sm-6 xs-12"></div>
<div class="box lg-2 md-4 sm-6 xs-12"></div>
<div class="box lg-2 md-4 sm-6 xs-12"></div>
<div class="box lg-2 md-4 sm-6 xs-12"></div>
<div class="box lg-2 md-4 sm-6 xs-12"></div>
</div>
</body>
</html>
设计：
自适应和流式布局的结合，响应式布局的代表：bootstrap。
五、弹性布局和rem/em布局
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
html,body{
margin: 0;
width: 100%;
}
.container{
background: #f00;
width: 7.5rem;
height: 7.5rem;
margin: 0 auto;
font-size: 0.36rem;
text-align: center;
}
</style>
</head>
<body>
<div class="container">你好！！！</div>
<script>
(function(doc, win){
var design = 750;
var resetScale = function(){
var deviceWidth = doc.documentElement.clientWidth || doc.body.clientWidth;
if (deviceWidth >= 750) {
doc.documentElement.style.fontSize = '100px';
} else {
doc.documentElement.style.fontSize = deviceWidth / design * 100 + 'px';
}
}
window.addEventListener('resize', resetScale, false);
window.addEventListener('DOMContentLoaded', resetScale, false);
})(document, window);
</script>
</body>
</html>
设计：
弹性布局使用flex。
rem/em布局使用rem调整各元素尺寸和文字大小，以上以750的设计稿，1rem = 100px，适用于移动端的页面。
总结：
对于需要移动端和pc端的网站，可以使用window.navigator.userAgent，判断访问平台，跳转移动端的站点或pc端的站点。
————————————————
原文链接：「偷笑ing」 https://blog.csdn.net/qq_38557202/article/details/102750512
|
|
收藏
淘帖
踩
