前言
我们的程序猿们在日常工作中可能会遇到部分项目需要使用到响应式布局。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，为了避免重复开发，响应式布局显得尤为重要
在这里我就分享一下我使用到的处理方案。如有错误，请多多指教！
目录
一、媒体查询
即为不同尺寸的设备设置不同的 CSS 样式。让我们直接上代码吧。
// 屏幕大于240px时的样式
@media (min-width: 240px) {
}
@media (min-width: 320px) {
}
@media (min-width: 360px) {
}
@media (min-width: 375px) {
}
@media (min-width: 384px) {
}
@media (min-width: 411px) {
}
@media (min-width: 414px) {
}
@media (min-width: 424px) {
}
@media (min-width: 480px) {
}
@media (min-width: 540px) {
}
@media (min-width: 640px) {
}
@media (min-width: 720px) {
}
@media (min-width: 750px) {
}
@media (min-width: 768px) {
}
@media (min-width: 800px) {
}
@media (min-width: 980px) {
}
@media (min-width: 1024px) {
}
@media (min-width: 1080px) {
}
@media (min-width: 1152px) {
}
@media (min-width: 1366px) {
}
@media (min-width: 1440px) {
}
@media (min-width: 2160px) {
}这里我们在对应尺寸宽度的的 {} 中写入css 样式就可以了。
二、使用rem布局
首先在我们的 HTML 页面的头部的 head 标签中写入 meta 标签，代码如下：
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no,">
<title>test</title>
</head>
<body>
<noscript>
<strong></strong>
</noscript>
<div id="app"></div>
</body>
</html>紧接着我们创建一个 css 文件，同时写入下列代码：
@media (min-width: 240px) {
html {
font-size: 32px;
}
}
@media (min-width: 320px) {
html {
font-size: 42.66667px;
}
}
@media (min-width: 360px) {
html {
font-size: 48px;
}
}
@media (min-width: 375px) {
html {
font-size: 50px;
}
}
@media (min-width: 384px) {
html {
font-size: 51.2px;
}
}
@media (min-width: 411px) {
html {
font-size: 54.8px;
}
}
@media (min-width: 414px) {
html {
font-size: 55.2px;
}
}
@media (min-width: 424px) {
html {
font-size: 56.53333px;
}
}
@media (min-width: 480px) {
html {
font-size: 64px;
}
}
@media (min-width: 540px) {
html {
font-size: 72px;
}
}
@media (min-width: 640px) {
html {
font-size: 85.33333px;
}
}
@media (min-width: 720px) {
html {
font-size: 96px;
}
}
@media (min-width: 750px) {
html {
font-size: 100px;
}
}
@media (min-width: 768px) {
html {
font-size: 102.4px;
}
}
@media (min-width: 800px) {
html {
font-size: 106.66667px;
}
}
@media (min-width: 980px) {
html {
font-size: 130.66667px;
}
}
@media (min-width: 1024px) {
html {
font-size: 136.53333px;
}
}
@media (min-width: 1080px) {
html {
font-size: 144px;
}
}
@media (min-width: 1152px) {
html {
font-size: 153.6px;
}
}
@media (min-width: 1366px) {
html {
font-size: 182.13333px;
}
}
@media (min-width: 1440px) {
html {
font-size: 192px;
}
}
@media (min-width: 2160px) {
html {
font-size: 288px;
}
}使用时，需要在 HTML 页面中引入我们上面写好的 css 文件。
在为 HTML 页面编写样式时，我们需要注意去使用 rem 来代替我们的 px ，这里我们还需要注意 rem 与 px 的换算。
如根据我们上面定义好的 css 去算的话，宽度为 375px 时换算成 rem 为单位是应该为 7.5rem
###### 没有更多了哟 ~~~