一、对于一些均分的排列使用flex布局(若要在移动端看着好看,可以专门为移动端开发页面)
flex布局本来就是自适应的,自适应部分随着屏幕尺寸的差异也会自动展示更多或者更少的内容。
//2048的flex布局(待补充)
缺点:
a. 不能100%按设计稿还原
b.可能会在 428px 的屏幕上看起来 OK,但在 320px 的屏幕上某个按钮被挤了下去。开发工程师和测试工程师需要在尽可能多的真实设备上确认效果,对展示有问题的地方用媒体查询做微调。但这样间接增加了工作量。
c. flex 自适应布局对绝大多数页面能合理展示,但对于一些非均分排列和两栏布局的设计风格就无能为力了。比如一个活动页面上有一个抽奖转盘。如果小屏和大屏都用同样大小展示,视觉上会很奇怪。
所以,开发工程师、设计师、测试工程师更偏好另外一种思路:等比缩放。
二、等比例缩放
要求页面随着移动端大小改变
(1)在head标签中加入meta标签设置viewport缩放
<meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑(物理)像素宽度/设计稿宽度}" >
例如:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
//个人在编写过程中测试过使用0.5可行(对于我当前的参数)
设置页面布局视口 (layout viewport) 的宽度为{设计稿宽度}(此时页面一般会超出屏幕),再缩放页面(initial-scale)使其恰好撑满屏幕。其中,可以通过js计算获取屏幕宽度。
缺陷:a. 会整体缩放
b. 对于设置的固定尺寸,由于不同设备视口和像素比不同,导致固定像素的网页在不同设备上的显示不同,有可能会缺少有可能会溢出,因此在移动端开发时就不能在使用px来进行布局了。如设置的是450px,对于屏幕小于450px的屏幕就会溢出(不能显示完全)。
(2)可以使用vw来自适应布局,vw适配(使用vw+rem)
前备知识:100vw就等于一个视口的大小,1rem = 1 html字体的大小
根据屏幕像素和vw进行换算来设置html的字体大小,之后布局时使用rem代替px进行布局即可。
例如:
html{
//使用vw进行移动端适配,假设以375px的屏幕为例,100vw = 750px
font-size: 5.333333333333333333vw;//则=40px
// font-size: 40px;
//使用vw可以使页面随移动端视口大小的改变等比例改变
//不同设备大小下vw不同,故font-size也不同
}
body{
background-color: #faf8ef;
.wrapper{
width: 11.25rem;//450px
//缩到450就不能再继续小了
margin: 3rem auto;//100px
position: relative;
#score{
width: 2.5rem;
height: 1rem;
line-height: .5rem;
text-align: center;
background-color: #bbada0;
border: solid .05rem #bbada0;
border-radius: .05rem;
color:#f9f8e9;
font-size: .4rem;
font-weight:bold;
position: absolute;
left: 0;
top:-1.75rem;
span{
color: white;
font-size: .5rem;
}
}
.newGame{
width: 2.75rem;
height: 1rem;
line-height: 1rem;
text-align: center;
text-decoration: none;
background-color: #8F7A66;
border: solid .05rem #8F7A66;
border-radius: .05rem;
color:#f9f8e9;
font-size: .4rem;
font-weight:bold;
position: absolute;
left: 8.5rem;
top:-1.75rem;
}
.bottomBox{
width: 11rem;
height: 11rem;
background-color: #BBADA0;
border: solid 0.125rem #BBADA0;
border-radius: 0.125rem;
.box{
width: 2.5rem;
height: 2.5rem;
background-color: #cdc1b4;
margin: 0.125rem;
border-radius: 0.05rem;
float:left;
span{
// span是内联元素,不设置display:block即使设置宽高也不能显示设置的宽高,只会根据其中内容来宽高
// display:none;
height: 2.5rem;
line-height: 2.5rem;
text-align: center;
font-size: 1.25rem;
font-weight:bold;
color: #776e65;
}
}
}
}
.gameOver{
display: none;
position: absolute;
width: 100%;
height: 100%;
line-height: 18.875rem;
background-color: rgb(202, 202, 230);
font-size: 1.25rem;
text-align: center;
text-decoration: none;
opacity:0.7;
color: black;
a{
display: inline-block;
margin: 0 2.5rem;
opacity:1;
color: green;
font-size: 1.25rem;
// justify-content: center;
// width: 70px;
// height: 70px;
// background-color: antiquewhite;
}
}
}
@keyframes size0to1{
//CSS3中的变形处理——transform功能(旋转、缩放、倾斜、移动)
from{
transform: scale(0);
}
to{
transform: scale(1);
}
}
@keyframes sizeMergeTo1{
from{
transform: scale(1.3);
}
to{
transform: scale(1);
}
}
注意:a.
font-size值小于12px时(不包括0),浏览器会把它默认设置为12px,故使用vw+rem布局时,将font-size设置为大于12px的值才会生效。
b. 基于此,我们可以把所有需要适配屏幕大小等比缩放的元素都使用 vw 或rem作为单位。不需要缩放的元素使用 px 做单位。
缺点:如果font-size设置的是一个不容易换算的值,布局时会比较麻烦。