移动端适配
一、移动端适配是什么？
移动端Web页面，就是我们进场遇见的H5页面、手机页面、webview页面等；因为手机设备屏幕尺寸大小不同，做移动端的Web页面，需要考虑各种尺寸设备上的兼容性问题。针对这个问题而提出来的各种解决方案被称为移动端适配；
二、基本概念
1.移动端设备视口
Viewpotr&Rem
在移动端浏览器当中，存在着两种视口，
1：设备视口（visual viewport）——也就是我们说的设备大小既设备高宽
2：布局视口（layout viewport，默认宽度980px）——网页的真实宽度是多少
二者的关系是：
（visual viewport）= （layout viewport）* scale（缩放比例）
2. 什么是rem?
1: rem（font size of the root element）是指相对于根元素的字体大小的单位。
2：em（font size of the element）是指相对于父元素的字体大小的单位。
em在浏览器中默认为16px，不会随浏览器尺寸变化。
而rem可以理解为会随屏幕尺寸变化而发生改变的单位（可以理解为屏幕宽度百分比，或者vw）。
在开发的时候，往往会因为尺寸改变导致页面元素位置，大小发生偏移，造成页面变形，而使用rem这类响应式的尺寸单位，则可根据页面的变化，自动按比例伸缩，常用作为移动端适配方案。
————————————————
三、解决方案
1. 调整视口
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scale=0,user-scalable=no">
<!-- content属性:
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例 -->
————————————————
2.编写媒体查询文件
这个CSS文件也需要链接到HTML中，才能达到适配
/*Galaxy S5 landscape & portrait*/
/*iphone 4 注意iphone5/SE的width是一样的 screen-width:320px*/
/*兼容iphone5 screen-width:360px*/
/*iphone 6/7/8 screen-width:375px*/
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
/*iphoneX*/
}
/*iphone 6plus screen-width:414px*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/*ipad等中等设备*/
}
html {
font-size: 16px;
}
@media screen and (min-width: 320px) {
html {
font-size: 16px;
}
}
@media screen and (min-width: 360px) {
html {
font-size: 18px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 18.75px;
}
}
@media screen and (min-width: 384px) {
html {
font-size: 19.2px;
}
}
@media screen and (min-width: 400px) {
html {
font-size: 20px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 20.7px;
}
}
@media screen and (min-width: 424px) {
html {
font-size: 21.2px;
}
}
@media screen and (min-width: 480px) {
html {
font-size: 24px;
}
}
@media screen and (min-width: 540px) {
html {
font-size: 27px;
}
}
@media screen and (min-width: 720px) {
html {
font-size: 36px;
}
}
@media screen and (min-width: 750px) {
html {
font-size: 37.5px;
}
}
————————————————
3. 完整项目
1- html结构
<!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,user-scale=0,user-scalable=no">
<!-- 链接到样式文件和媒体查询文件 -->
<link rel="stylesheet" href="./normalize-new.css">
<link rel="stylesheet" href="./style.css">
<title>Distribution_center</title>
</head>
<body>
<!-- 页眉导航-->
<header>
<a href="#">
<img src="images/cxx-Icon/left-icon.png" alt="">
</a>
<span>分销中心</span>
</header>
<!-- 中间内容-->
<div id="container">
<!-- 背景图片-->
<div class="Backg-box">
<img src="images/bg-distribution.png" alt="">
</div>
<!-- 个人信息-->
<div class="per-inf">
<div class="user-profile">
<img class="userimg" src="images/cxx-Icon/head.jpg" alt="">
<div class="usertext">
<P class="firp"><span>安安</span></P>
<p class="secp">
<span>当前等级：<span class="nbman">达人</span></span>
</p>
</div>
<a href="#">
<img src="images/cxx-Icon/sigh-icon.png" alt="">
</a>
</div>
<!-- 收益列表 -->
<div class="Revenue-list">
<ul>
<li class="firli">
<div>
<span class="alitmaxnum">10.00</span>
<p class="alitmax">今日收益(元)</p>
</div>
<div>
<span class="alitmaxnum">45.20</span>
<p class="alitmax">总收益(元)</p>
</div>
</li>
<li class="overlist">
<div>
<span>0</span>
<p>今日推广订单</p>
</div>
<div>
<span>0</span>
<p>累计推广订单</p>
</div>
</li>
<li class="overlist">
<div>
<span>0</span>
<p>今日新增用户</p>
</div>
<div>
<span>0</span>
<p>累计用户</p>
</div>
</li>
<li class="overlist">
<div>
<span>0</span>
<p>今日邀请新增</p>
</div>
<div>
<span>0</span>
<p>累计邀请</p>
</div>
</li>
<li class="endli">
<span class="blacktext">可提现金额(元)</span>
<span class="redmoney">99.99</span>
<a href="#" class="right-a"><img src="images/cxx-Icon/right-icon.png" alt=""></a>
<a href="javascript:show();" class="up-a" id="Contraction"><img src="images/cxx-Icon/uplit.png" alt=""></a>
</li>
</ul>
</div>
</div>
<!-- 推广卖货-->
<div class="extension">
<div class="TGtitle">
<b>推广卖货</b>
</div>
<div class="TGbr">
<div class="onebr brbott ">
<div class="brright-bor">
<div>
<p><span class="larblack">推广商品</span> </p>
<p>佣金赚不停</p>
</div>
<div class="on-rigthimg">
<img src="Images/icon-distribution1.png" alt="sr">
</div>
</div>
<div>
<div>
<p><span class="larblack">分享平台</span> </p>
<p>别人点火锅你赚钱</p>
</div>
<div class="on-rigthimg">
<img src="Images/icon-distribution2.png" alt="sr">
</div>
</div>
</div>
<div class="onebr">
<div class="brright-bor">
<div>
<p><span class="larblack">邀请好友</span> </p>
<p>邀请达人赚佣金</p>
</div>
<div class="on-rigthimg">
<img src="Images/icon-distribution3.png" alt="sr">
</div>
</div>
<div>
<div>
<p><span class="larblack">新手教学</span> </p>
<p>教你赚取更多佣金</p>
</div>
<div class="on-rigthimg">
<img src="Images/icon-distribution4.png" alt="sr">
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 页脚导航214 24-->
<footer>
<span>回到首页 | 个人中心</span>
</footer>
<!-- 链接到js -->
<script src="JavaScript/index.js"></script>
</body>
<br>
</html>
————————————————
2- css样式文件
这里的CSS文件格式是经过Less转换后的，MoYu在编写样式时，使用的Less方法，不懂得同学可上网查询less哦，这里我就不过多讲解了。
* {
margin: 0;
padding: 0;
}
html {
font-size: 37.5px;
}
body {
margin: 0 auto;
width: 100%;
font-family: -apple-system, Helvetica, sans-serif;
color: #666;
line-height: 1.5;
background: #d6d6d6;
max-width: 750px;
min-width: 375px;
}
a {
text-decoration: none;
}
ul,
li {
list-style: none;
}
/* <!-- 页眉导航--> */
header {
position: relative;
height: 1.333333rem /* 50/37.5 */;
width: 100%;
line-height: 1.333333rem;
font-size: 0.426667rem /* 16/37.5 */;
font-weight: 550;
text-align: center;
background: #fff;
}
header a {
position: absolute;
left: 0.4rem /* 15/37.5 */;
}
/* <!-- 中间内容--> */
#container {
position: relative;
height: 20.88rem /* 735/37.5 */;
width: 100%;
/* <!-- 背景图片--> */
/* <!-- 个人信息--> */
/* <!-- 推广卖货--> */
}
#container .Backg-box {
position: absolute;
left: 0;
top: 0;
height: 5.133333rem /* 192.5/37.5 */;
width: 100%;
}
#container .Backg-box img {
width: 100%;
}
#container .per-inf {
position: absolute;
left: 1.5%;
top: 4rem /* 150/37.5 */;
height: 10.88rem /* 408/37.5 */;
width: 97%;
background-color: #ffffff;
border-radius: 0.346667rem /* 13/37.5 */;
}
#container .per-inf .user-profile {
position: relative;
height: 2.266667rem /* 85/37.5 */;
width: 100%;
font-size: 0.426667rem /* 16/37.5 */;
text-align: center;
}
#container .per-inf .user-profile .userimg {
position: absolute;
top: -0.666667rem /* 25/37.5 */;
left: 50%;
transform: translateX(-50%);
width: 1.333333rem /* 50/37.5 */;
height: 1.333333rem /* 50/37.5 */;
border-radius: 50%;
border: 3px solid #ffffff;
}
#container .per-inf .user-profile .usertext {
position: absolute;
top: 0.8rem /* 30/37.5 */;
left: 50%;
transform: translateX(-50%);
}
#container .per-inf .user-profile .usertext .firp {
font-weight: 600;
font-size: 0.426667rem /* 16/37.5 */;
}
#container .per-inf .user-profile .usertext .secp {
font-weight: 400;
font-size: 0.32rem /* 12/37.5 */;
}
#container .per-inf .user-profile .usertext .secp .nbman {
color: #ff4848;
}
#container .per-inf .user-profile a {
position: absolute;
top: 0.32rem /* 12/37.5 */;
right: 0.426667rem /* 16/37.5 */;
height: 0.426667rem /* 16/37.5 */;
width: 0.426667rem /* 16/37.5 */;
}
#container .per-inf .user-profile a img {
width: 100%;
}
#container .per-inf .Revenue-list {
box-sizing: border-box;
padding: 0.213333rem /* 8/37.5 */;
position: relative;
height: 320px;
width: 100%;
font-size: 0.426667rem /* 16/37.5 */;
text-align: center;
}
#container .per-inf .Revenue-list ul > li {
display: flex;
justify-content: space-around;
height: 1.6rem /* 60/37.5 */;
width: 100%;
border-bottom: 1px solid #cccccc;
font-weight: 600;
font-size: 0.426667rem /* 16/37.5 */;
}
#container .per-inf .Revenue-list ul > .firli {
height: 1.92rem /* 72/37.5 */;
}
#container .per-inf .Revenue-list ul > .firli .alitmaxnum {
font-size: 0.533333rem /* 20/37.5 */;
}
#container .per-inf .Revenue-list ul > .firli .alitmax {
font-size: 0.426667rem /* 16/37.5 */;
}
#container .per-inf .Revenue-list ul > .endli {
box-sizing: border-box;
border-bottom: none;
padding-top: 0.326667rem /* 16/37.5 */;
position: relative;
height: 1.733333rem /* 65/37.5 */;
justify-content: space-between;
font-size: 0.453333rem /* 17/37.5 */ /* 18/37.5 */ /* 18/37.5 */ /* 16/37.5 */ /* 20/37.5 */;
}
#container .per-inf .Revenue-list ul > .endli a {
position: absolute;
width: 0.426667rem /* 16/37.5 */;
height: 0.426667rem /* 16/37.5 */;
}
#container .per-inf .Revenue-list ul > .endli .up-a {
left: 50%;
transform: translateX(-50%);
bottom: 0.426667rem /* 16/37.5 */;
}
#container .per-inf .Revenue-list ul > .endli .right-a {
position: absolute;
right: 0.133333rem /* 5/37.5 */;
top: 0.3826667rem;
}
#container .per-inf .Revenue-list ul > .endli .redmoney {
position: absolute;
right: 0.866667rem /* 10/37.5 */;
color: red;
}
#container .extension {
width: 97%;
position: relative;
left: 1.5%;
top: 15.2rem /* 570/37.5 */;
box-sizing: border-box;
padding: 0.213333rem /* 8/37.5 */;
font-size: 0.426667rem /* 16/37.5 */;
background: #ffffff;
border-radius: 13px;
}
#container .extension .TGtitle {
padding-left: 5px;
font-size: 0.533333rem /* 20/37.5 */;
height: 1rem;
border-bottom: 1px solid #b1b1b1;
}
#container .extension .TGbr {
width: 100%;
}
#container .extension .TGbr .onebr {
display: flex;
}
#container .extension .TGbr .brbott {
border-bottom: 1px solid #b1b1b1;
}
#container .extension .TGbr .brright-bor {
border-right: 1px solid #b1b1b1;
}
#container .extension .TGbr .onebr > div {
padding: 15px 5px;
padding-right: 0.266667rem /* 10/37.5 */;
width: 4.8rem /* 180/37.5 */;
width: 9.48rem /* 355.5/37.5 */;
height: 1.266667rem /* 40/37.5 */;
display: flex;
justify-content: space-between;
font-size: 0.33333rem /* 14/37.5 */;
}
#container .extension .TGbr .onebr > div .on-rigthimg img {
width: 1.2rem;
}
#container .extension .TGbr .onebr > div .larblack {
display: block;
margin-bottom: 0.1386667rem /* 7/37.5 */;
font-size: 0.426667rem /* 16/37.5 */;
font-weight: bolder;
}
/* <!-- 页脚导航--> */
footer {
position: relative;
margin: 0 auto;
margin-top: 0.3rem;
margin-bottom: 0.3rem;
font-size: 0.23333rem /* 14/37.5 */;
text-align: center;
}
————————————————
3- 简单的js行为
var Contraction = document.querySelector("#Contraction")//a标签
var overlist = document.querySelectorAll(".overlist")//隐藏列表
var per_inf = document.querySelector(".per-inf")
var Revenue_list = document.querySelector(".Revenue-list")
var extension = document.querySelector(".extension")
function show() {
for (let i = 0; i < overlist.length; i++) {
overlist[i].style.display = 'none'
}
extension.style.top = '10.7rem'
per_inf.style.height = 'auto'
Revenue_list.style.height = 'auto'
Contraction.style.transform = 'rotateZ(180deg)'
Contraction.href = "javascript:hide();";
}
function hide() {
for (let i = 0; i < overlist.length; i++) {
overlist[i].style.display = 'flex'
}
extension.style.top = '15.5rem'
Contraction.style.transform = 'rotateZ(360deg)'
Contraction.href = "javascript:show();";
}
————————————————
效果展示
pc端：
移动端：
256
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
