响应式布局
文章目录
- 响应式布局
-
- 设置meta标签
- @media 媒体查询
-
- 使用
- 使用style标签
- 使用link引入
- flex
- 自适应布局
- 响应式布局
- rem实现字体大小自适应
- rem弹性布局
响应式布局
设置meta标签
- viewport：视口，表示网页的可视区域。
- width：控制viewport的大小，可以指定一个具体的值，如600，可以是由关键字组成的特殊值，例如 device-width 就表示设备的宽度。
- initial-scale：初始缩放比例，也就是页面第一次加载时的缩放比例。
- minimum-scale：表示允许用户缩放的最大比例，范围0~10.0。
- maximum-scale：表示允许用户缩放的最小比例，范围0~10.0。
- user-scalable：表示用户是否可以手动缩放，yes表示允许，no表示禁止。
@media 媒体查询
CSS 媒体查询可以根据指定的条件，针对不同的媒体类型（screen print）定义不同的 CSS 样式。
@media常用参数
- width、height：浏览器的可视宽度、高度。
- device-width、device-height：设备屏幕的宽度、高度。移动端用device-width较多。
使用
场景：当屏幕大于等于400px时，一行显示3个；当屏幕大于等于300px并且小于等于399px时，一行显示2个；当屏幕小于等于299px时，一行显示1个。
doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>响应式布局title>
<style>
#div0 {
width: 100%;
height: 500px;
}
#div0 div {
float: left;
height: 100px;
}
#div0 div:first-child {
background-color: red;
}
#div0 div:nth-child(2) {
background-color: green;
}
#div0 div:last-child {
background-color: blue;
}
/* >=400px */
@media screen and (min-width:400px) {
#div0 div {
width: 33.3%;
}
}
/* >=300px 并且 <=399px */
@media screen and (min-width:300px) and (max-width:399px) {
#div0 div {
width: 50%;
}
}
/* <=299px */
@media screen and (max-width:299px) {
#div0 div {
width: 100%;
}
}
style>
head>
<body>
<div id="div0">
<div>div>
<div>div>
<div>div>
div>
body>
html>
使用style标签
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>响应式布局title>
<style>
#div0 {
width: 100%;
height: 500px;
}
#div0 div {
float: left;
height: 100px;
}
#div0 div:first-child {
background-color: red;
}
#div0 div:nth-child(2) {
background-color: green;
}
#div0 div:last-child {
background-color: blue;
}
style>
<style media="screen and (min-width:400px)">
#div0 div {
width: 33.3%;
}
style>
<style media="screen and (min-width:300px) and (max-width:399px)">
#div0 div {
width: 50%;
}
style>
<style media="screen and (max-width:299px)">
#div0 div {
width: 100%;
}
style>
head>
使用link引入
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>响应式布局title>
<style>
#div0 {
width: 100%;
height: 500px;
}
#div0 div {
float: left;
height: 100px;
}
#div0 div:first-child {
background-color: red;
}
#div0 div:nth-child(2) {
background-color: green;
}
#div0 div:last-child {
background-color: blue;
}
style>
<link rel="stylesheet" href="css/css1.css" media="screen and (min-width:400px)">
<link rel="stylesheet" href="css/css2.css" media="screen and (min-width:300px) and (max-width:399px)">
<link rel="stylesheet" href="css/css3.css" media="screen and (max-width:299px)">
head>
css1.css：
#div0 div {
width: 33.3%;
}
css2.css
#div0 div {
width: 50%;
}
css3.css
#div0 div {
width: 100%;
}
flex
FlexiableBox指弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。
CSS3 flex 弹性盒子模型
自适应布局
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自适应布局title>
<script>
var redirect = () => {
//获取设备信息
let userAgent = navigator.userAgent.toLowerCase();
let device = /ipad|iphone|midp|rv: 1.2.3.4|ucweb|android|windows ce|windows mobile/;
if (device.test(userAgent)) {
window.location.href = "mobile.html";
} else {
window.location.href = "pc.html";
}
}
redirect();
script>
head>
<body>
body>
html>
响应式布局
reset.css:
* {
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
ul,
li {
list-style-type: none;
}
small.css:
.container {
display: flex;
flex-direction: column;
width: 100%;
margin: 0 auto;
}
.top {
width: 100%;
flex: 0 0 50px;
background-color: yellow;
}
.main {
flex: 0 0 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
}
.main .classify {
flex: 0 0 100%;
background-color: #f5f5f5;
display: flex;
flex-wrap: wrap;
border-left: 1px solid white;
border-right: 1px solid white;
align-content: flex-start;
}
.main .classify li {
flex: 0 0 33.3%;
height: 40px;
line-height: 40px;
text-align: center;
K border-bottom: 1px solid white;
}
.main .pics {
flex: 0 0 100%;
background-color: #f5f5f5;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.main .pics li {
flex: 0 0 30%;
height: 120px;
text-align: center;
border-bottom: 1px solid white;
background-color: green;
margin-top: 10px;
}
big.css
.container {
display: flex;
flex-direction: column;
width: 80%;
margin: 0 auto;
}
.top {
width: 100%;
flex: 0 0 50px;
background-color: yellow;
}
.main {
flex: 0 0 100%;
display: flex;
flex-direction: row;
}
.main .classify {
flex: 0 0 10%;
display: flex;
flex-wrap: wrap;
background-color: #f5f5f5;
border-left: 1px solid white;
border-right: 1px solid white;
}
.main .classify li {
flex: 0 0 100%;
height: 40px;
line-height: 40px;
text-align: center;
border-bottom: 1px solid white;
}
.main .pics {
flex: 0 0 90%;
display: flex;
background-color: #f5f5f5;
flex-wrap: wrap;
justify-content: space-around;
}
.main .pics li {
flex: 0 0 30%;
height: 120px;
text-align: center;
border-bottom: 1px solid white;
background-color: green;
margin-top: 10px;
}
使用
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式布局title>
<meta name="viewport"
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/big.css" media="(min-width:600px)">
<link rel="stylesheet" href="css/small.css" media="(max-width:600px)">
head>
<body>
<div class="container">
<div class="top">div>
<div class="main">
<div class="classify">
<li>分类1li>
<li>分类2li>
<li>分类3li>
<li>分类4li>
<li>分类5li>
<li>分类6li>
div>
<div class="pics">
<li>图片li>
<li>图片li>
<li>图片li>
<li>图片li>
<li>图片li>
<li>图片li>
<li>图片li>
<li>图片li>
div>
div>
div>
body>
html>
rem实现字体大小自适应
- rem：1rem=根元素字体大小
- em：1em=当前元素字体大小
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rem使用title>
<script>
var fn = () => {
let w = document.documentElement.clientWidth; //获取设备宽度
let fontSize = 20 * (w / 320);
fontSize = fontSize > 40 ? 40 : fontSize;
let size = fontSize + "px";
document.documentElement.style.fontSize = size;
}
window.addEventListener("load", fn);
window.addEventListener("resize", fn);
script>
<style type="text/css">
div {
font-size: 1rem;
}
style>
head>
<body>
<div>hello worlddiv>
body>
html>
rem弹性布局
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<link rel="stylesheet" href="css/main.css">
head>
<body>
<div class="div0">
<div class="top">
<img id="logo" src="img/logo2.png" alt="展示案例logo">
div>
<div class="main">
<ul>
<li>
<div><img src="img/bg.jpg" alt="展示案例图" class="exmple">div>
<div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算div>
<div><img src="img/person.png" alt="" class="shopcar">div>
li>
<li>
<div><img src="img/bg.jpg" alt="展示案例图" class="exmple">div>
<div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算div>
<div><img src="img/person.png" alt="" class="shopcar">div>
li>
<li>
<div><img src="img/bg.jpg" alt="展示案例图" class="exmple">div>
<div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算div>
<div><img src="img/person.png" alt="" class="shopcar">div>
li>
<li>
<div><img src="img/bg.jpg" alt="展示案例图" class="exmple">div>
<div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算div>
<div><img src="img/person.png" alt="" class="shopcar">div>
li>
<li>
<div><img src="img/bg.jpg" alt="展示案例图" class="exmple">div>
<div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算div>
<div><img src="img/person.png" alt="" class="shopcar">div>
li>
<li>
<div><img src="img/bg.jpg" alt="展示案例图" class="exmple">div>
<div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算div>
<div><img src="img/person.png" alt="" class="shopcar">div>
li>
<li>
<div><img src="img/bg.jpg" alt="展示案例图" class="exmple">div>
<div>rem弹性布局案例联系，根据实际屏幕宽度做等比例换算div>
<div><img src="img/person.png" alt="" class="shopcar">div>
li>
ul>
div>
<div class="bottom">
<div><img src="img/apple_pic.png" alt="">div>
<div><img src="img/banana_pic.png" alt="">div>
div>
div>
<script>
var fn = () => {
let w = document.documentElement.clientWidth; //获取设备宽度
let fontSize = 20 * (w / 320);
fontSize = fontSize > 40 ? 40 : fontSize;
let size = fontSize + "px";
document.documentElement.style.fontSize = size;
}
window.addEventListener("load", fn);
window.addEventListener("resize", fn);
script>
body>
html>
//main.css
* {
margin: 0;
padding: 0;
}
html {
font-size: 10px;
}
.top,
.main,
.bottom {
width: 100%;
}
.top {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 2rem;
z-index: 1000;
background-color: #f5f5f5;
}
#logo {
width: 4rem;
height: 1rem;
/* 垂直居中 */
vertical-align: -webkit-baseline-middle;
}
.main {
height: auto;
position: absolute;
top: 2rem;
border: 2rem;
background-color: #f5f5f5;
}
.main ul {
display: flex;
flex-direction: column;
justify-content: space-between;
font-size: 0.5rem;
}
.exmple {
width: 3.6rem;
height: 2rem;
vertical-align: -webkit-baseline-middle;
}
.shopcar {
width: 1rem;
height: 1rem;
vertical-align: -webkit-baseline-middle;
}
.main ul li {
flex: 1 1 3rem;
display: flex;
border-bottom: 1px solid dimgrey;
align-items: center;
}
.main ul li div {
margin-left: 0.2rem;
margin-right: 0.5rem;
}
.bottom {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 2rem;
z-index: 1000;
background-color: #f5f5f5;
display: flex;
}
.bottom div {
flex: 1 1 auto;
text-align: center;
}
.bottom div img {
width: 1.5rem;
height: 1.5rem;
vertical-align: -webkit-baseline-middle;
}