移动端
标签:
<!--
新增的块级元素:
1.header,可以用来写头部区域
2.footer,可以用来写尾部区域
3.nav,可以用来写导航区域
4.section,类似于div的
5.main,可以划分页面的主要内容区域
6.article,文章区域
7.aside,侧边栏
8.figure+figcaption
9.hgroup标题组
-->
常见的设备:
iPhone5 真实宽度:320 设计稿宽度:640 两倍关系
iphone678 375 750 两倍关系
iphone678plus 414 1242 三倍关系
iphoneX 375 1125 三倍关系
适配:
1.改视口为理想视口
<!--
viewport:view视觉 port:端口 视口
width=device-width:视口的宽度等于设备的宽度
initial-scale=1.0:初始缩放比例为1
minimum-scale=1.0:最小缩放比例为1
maximum-scale=1.0:最大缩放比例
user-scalable=no:禁止用户缩放
-->
<!-- 改视口为理想视口 -->
<meta name="viewport" content="width=device-width,
initial-scale=1, maximum-scale=1, user-scalable=no">
2.确定dpr:
设计稿大小,找到对应设备,设计稿 / 设备大小 = dpr
测的像素值/dpr=像素值,正常来说,设计稿一般是正常设备的2,3倍, 所以除以2或者3
3.考虑适配问题
更改html字号(字号可以自己随便去设置)
借助插件 px to rem : 设置基准字号:100 px 。适配完后会自动转换
eg: 750 / (dpr: 750/350) / 字号100 = 3.75
视图分为 100vw / 3.75 = 26.67vw
字号回归正常: font-size: 16px;
4.插件转换 px rem : px to rem & rpx & vw
移动端或者大屏适配 rem 会用的到。具体设置里改基数
选中按 Alt + Z 可以px和rem转换
vw配合rem做移动端
( PC端其实也一个道理, 比如一倍关系, 1280, 或者大于 980 )
1920*1080
eg: 3 倍的设计稿 (vue index.html 页面)
/* 视图宽度为 iphone678plus 1242 三倍关系 */
100vw / [ 1242 / drp: ( 1242 / 414 ) / 100 ] = 24.15vw
html {
font-size: 24.15vw;
}
/* 高度自适应 */
html,
body {
height: 100%;
}
/* 让页面字号回归正常 */
body #app {
font-size: 16px;
display: flex;
flex-direction: column;
height: 100%;
}
eg: 2 倍的设计稿
<!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,
minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<title>App</title>
<!-- 标签初始化 reset.css -->
<link rel="stylesheet" href="./reset.css" />
<style>
/*
设计稿大小为750px,设备则为iPhone678 375px
自定插件100基数:
设计稿750 / (设计稿750 / iphone678) / 基准字号100px = 3.75
750 / ( 750 / 375 ) / 100 = 3.75
视图宽度:100vw
更改字号: 100vw / 3.75=26.67vw
字号回归正常:font-size: 16px;
就实现了 1rem = 基准字号 100px
*/
/* 视图宽度 */
html {
font-size: 26.67vw;
}
/* 高度自适应 */
html,
body {
height: 100%;
}
/* 让页面字号回归正常 */
body {
font-size: 16px;
display: flex;
flex-direction: column;
height: 100%;
}
/* */
header {
height: 0.44rem;
background-color: aqua;
}
/* */
nav {
height: 0.7rem;
background-color: aquamarine;
}
/* 去除滚动条 */
ul::-webkit-scrollbar {
display: none;
}
nav ul {
height: 0.35rem;
display: flex;
justify-content: space-around;
align-items: center;
font-size: 0.14rem;
/* 滚动导航 */
flex: 1;
overflow: auto;
}
/* 内容区自适应其他不动 */
main {
height: 100%;
flex: 1;
overflow: auto;
background-color: pink;
}
/* */
footer {
height: 0.88rem;
background-color: blue;
}
</style>
</head>
<body>
<!-- vw vh -->
<header>头部</header>
<nav>
<ul>
<li>直播啊</li>
<li>直播啊</li>
<li>直播啊</li>
<li>直播啊</li>
<li>直播啊</li>
<li>直播啊</li>
<li>直播啊</li>
<li>直播啊</li>
<li>直播啊</li>
<li>直播啊</li>
</ul>
<!-- icon字体 -->
<span class="iconfont icon-gengduo"></span>
</nav>
<main>
<figure>
<img src="" alt="" />
<figcaption></figcaption>
</figure>
</main>
<footer>尾部</footer>
</body>
</html>
标签初始化 reset.css
/*
标签初始化 reset.css
*/
/* 清除所有标签默认的内外间距 */
* {
padding: 0;
margin: 0;
/* 全变成怪异盒子 */
box-sizing: border-box;
}
/* 版心 */
.center {
/*
width: 1220px;
height: 100%;
margin:0 auto;
background-color: pink; */
}
/* 万能清除法 */
.clearfix::after {
content: "";
width: 0;
height: 0;
overflow: hidden;
visibility: hidden;
display: block;
clear: both;
}
/* 清除列表的默认样式 */
ul,
ol {
list-style: none;
}
/* 清除下划线 */
a,
u {
text-decoration: none;
}
/* 不加粗 */
b,
strong {
font-weight: 400;
}
/* 不倾斜 */
i,
em {
font-style: normal;
}
/* 不加粗 统⼀16px */
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: 16px;
font-weight: 400;
}
/* 清除输⼊框的轮廓线 */
input {
outline: none;
}
媒体查询:
( 可以做 PC端 和 手机端 的不同样式页面 ), 搭配rem, 可能事半功倍
调整设备宽度可以看到
<style>
/* 不在媒体查询里边的页面: */
.home {
overflow-x: hidden;
overflow-y: hidden;
/* 查看变化 */
background-color: skyblue;
}
/* @media中的样式: 当设备在 980 - 375 之间会显示 */
@media screen and (max-width: 980px) and (min-width: 374px) {
/* 解决滚动条 */
.home {
overflow-x: hidden;
overflow-y: hidden;
/* 查看变化 */
background-color: pink;
}
}
</style>
<style>
@media all and (max-width: 320px) {
html {
font-size: 12px;
}
}
@media all and (min-width: 321px) and (max-width: 376px) {
html {
font-size: 14px;
}
}
@media all and (min-width: 377px) {
html {
font-size: 16px;
}
}
</style>