1.自适应布局
<div class="contaner">
<div class="main"> <!--看清楚,这里用一个父div包住-->
<div class="content">自适应</div>
</div>
<div class="left">200px</div>
<div class="right">200px</div>
</div>
.contaner {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
.main {
width: 100%;
height: 100%;
float: left;
.content {
margin: 0 200px;
background-color: pink;
height: 100%;
}
}
.left,
.right {
width: 200px;
height: 100%;
float: left;
background-color: greenyellow;
}
.left {
margin-left: -100%; //important
}
.right {
margin-left: -200px; //important
}
}
2.响应式布局——之媒体查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<meta name="MobileOptimized" content="480"/>
<title>@media screen</title>
<style>
.box {
width: 10rem;
height: 10rem;
background-color: pink;
margin-left: 20rem;
}
@media screen and (max-width: 480px) {
html {
/* min-width: 477px; */
font-size: 18px;
background: blue;
overflow: hidden;
}
body{
/* min-width: 480px; */
}
}
@media screen and (min-width: 481px) and (max-width: 800px) {
html {
font-size: 18px;
background: skyblue;
}
}
@media screen and (min-width: 801px) and (max-width: 1400px) {
html {
font-size: 16px;
background: deeppink;
}
}
@media screen and (min-width: 1400px) {
html {
font-size: 10px;
background: yellow;
}
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
3. 自适应和媒体查询相结合
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width; initial-scale=1.0; minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="MobileOptimized" content="480" />
<title>@media screen</title>
<style>
.head {
width: 100%;
height: 10rem;
background-color: gray;
}
.foot{
height: 100px;
width: 100%;
background-color: aqua;
}
@media screen and (max-width: 480px) {
html {
min-width: 480px;
font-size: 18px;
background: blue;
overflow: hidden;
}
.left,
.right {
width: 100%;
height: 100px;
display: block;
background-color: greenyellow;
}
.content{
width: 100%;
height: 100%;
background-color: orange;
}
}
@media screen and (min-width: 481px) and (max-width: 800px) {
html {
font-size: 18px;
background: skyblue;
}
.left,
.right {
width: 100%;
height: 100px;
display: inline-block;
background-color: greenyellow;
}
.content{
width: 100%;
height: 100%;
background-color: orange;
}
}
@media screen and (min-width: 801px) and (max-width: 1400px) {
html {
font-size: 16px;
background: deeppink;
}
.contaner {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.left,
.right {
width: 200px;
height: 100%;
float: left;
background-color: greenyellow;
}
.left {
margin-left: -100%;
/* important */
}
.right {
margin-left: -200px;
/* important */
}
.main {
width: 100%;
height: 100%;
float: left;
}
.content {
margin: 0 200px;
background-color: pink;
height: 100%;
}
}
@media screen and (min-width: 1400px) {
html {
font-size: 10px;
background: yellow;
}
.contaner {
margin: 0;
height: 100%;
padding: 0;
font-size: 30px;
font-weight: 500;
text-align: center;
}
.left,
.right {
width: 200px;
height: 100%;
float: left;
background-color: greenyellow;
}
.left {
margin-left: -100%;
/* important */
}
.right {
margin-left: -200px;
/* important */
}
.main {
width: 100%;
height: 100%;
float: left;
}
.content {
margin: 0 200px;
background-color: pink;
height: 100%;
}
}
</style>
</head>
<body>
<div class="head">logo</div>
<!-- 中间部分 -->
<div class="contaner">
<div class="main">
<div class="content">自适应</div>
</div>
<div class="left">200px</div>
<div class="right">200px</div>
</div>
<div class="foot">结尾</div>
</body>
</html>
在vue中的使用
- 创建一个全局样式表: 首先,你可以创建一个全局的样式表(如
global.css
),将你的所有样式规则放在其中。
/* global.css */
.box {
width: 10rem;
height: 10rem;
background-color: pink;
margin-left: 20rem;
}
@media screen and (max-width: 480px) {
html {
font-size: 18px;
background: blue;
overflow: hidden;
}
body {
/* min-width: 480px; */
}
}
@media screen and (min-width: 481px) and (max-width: 800px) {
html {
font-size: 18px;
background: skyblue;
}
}
@media screen and (min-width: 801px) and (max-width: 1400px) {
html {
font-size: 16px;
background: deeppink;
}
}
@media screen and (min-width: 1400px) {
html {
font-size: 10px;
background: yellow;
}
}
- 在主Vue实例中引入全局样式: 在主Vue实例(通常是
main.js
或类似的入口文件)中引入全局样式表。
// main.js
import Vue from 'vue';
import App from './App.vue';
import './assets/global.css'; // Import the global stylesheet
new Vue({
render: h => h(App),
}).$mount('#app');
3.在组件中使用布局: 然后,你可以在组件模板中应用这些样式。
<template>
<div>
<div class="box"></div>
</div>
</template>
<style scoped>
/* Component-specific styles go here if needed */
</style>
4.弹性布局 display:flex;
弹性布局实现上中下布局
<template>
<div class="layout">
<div class="header">
<!-- 上部内容 -->
<h1>Header</h1>
</div>
<div class="main">
<!-- 中部内容 -->
<p>Main Content</p>
</div>
<div class="footer">
<!-- 下部内容 -->
<p>Footer</p>
</div>
</div>
</template>
<script>
export default {
name: 'LayoutComponent',
// 组件的其他选项
}
</script>
<style>
/* 样式可以根据需求进行自定义 */
.layout {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
background-color: #f0f0f0;
padding: 20px;
}
.main {
flex: 1;
background-color: #ffffff;
padding: 20px;
}
.footer {
background-color: #f0f0f0;
padding: 20px;
}
</style>
结论
1.如果只做pc端,那么静态布局(定宽度)是最好的选择;
2.如果做移动端,且设计对高度和元素间距要求不高,那么弹性布局(rem+js)是最好的选择,一份css+一份js调节font-size搞定;
3.如果pc,移动要兼容,而且要求很高那么响应式布局还是最好的选择,前提是设计根据不同的高宽做不同的设计,响应式根据媒体查询做不同的布局。