前端 不同屏幕宽度 自适应布局 解决方案

CSS响应式布局(自适应布局)

响应式布局:一套前端代码
自适应布局:多套前端代码

目的都是使一个网站能够兼容多个不同的终端

响应式布局常见实现方式

• 使用CSS中的媒体查询
• % rem flex布局

设置meta标签

首先，我们需要设置meta标签来告诉浏览器，让视口(网页的可视区域)的宽度=设备的宽度，并禁止用户对页面的缩放，如下所示：

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

其中：

• viewport: 视口，表示网页的可视区域
• width:控制viewport的大小，可以指定一个具体的值，例如600，也可以是由关键字组成的特殊值，例如device-width表示设备的宽度
• initial-scale: 表示初始缩放比例，也就是页面第一次加载时的缩放比例
• maximum-scale: 表示允许用户缩放的最大比例，范围[0,10]
• minimum-scale: 表示允许用户缩放到最小比例，范围[0,10]
• user-scalable:表示用户是否可以手动缩放，值yse no

CSS媒体查询(主要在移动端)

CSS媒体查询可以根据指定的条件，针对不同的媒体类型定义不同的CSS样式，让使用不同设备的用户都能得到最佳的体验。

@media screen and (max-width: 320px){
	body{
		background: pink;
	}
}

@media screen and (min-width:321px) and (max-width:375px){
	body{
		background: red;
	}
}

@media screen and (min-width:376px){
	body{
		background: green;
	}
}

//min-device-width 设备宽度
//min-width 浏览器宽度

@media常用参数

属性名称	作用
widht	浏览器可视宽度
height	浏览器可视高度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度

@media的使用方式

//1
<style>
@media screen and (min-width:300px){

}
<style>

//2
<style media="(min-width:300px) and (max-width:399px)">

</style>>

//3
<link href='' rel='stylesheet' media="(min-width:300px) and (max-width:399px)"></style>

字体不要使用绝对大小(px)，而使用相对大小(em，rem，%)

flex弹性盒子

概念

flex为FlexiableBox的简称，即弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。

优点:

• 用来为盒装模型提供最大的灵活性，任何一个容器都可以指定为flex布局
• 更加符合响应式设计的特点

rem

概念

指相对于根元素(html元素)的字体的大小(根字体默认为16px)

与em区别

em是相对于父级元素的字体的大小