前言
我们的程序猿们在日常工作中可能会遇到部分项目需要使用到响应式布局。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的普及，为了避免重复开发，响应式布局显得尤为重要
在这里我就分享一下我使用到的处理方案。如有错误，请多多指教！
目录
一、媒体查询
即为不同尺寸的设备设置不同的 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
###### 没有更多了哟 ~~~
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。