一、meta viewport
- 在head中写一个meta标签:
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
width=device-width
: 让当前视口宽度等于设备的宽度
user-scalable=no
: 禁止用户缩放
initial-scale=1.0
: 设置页面的初始缩放值为1.0
maximum-scale=1.0
: 允许用户的最大缩放值为1.0
minimum-scale=1.0
: 允许用户的最小缩放值为1.0
二、媒体查询
- 格式:
@media (查询条件 ){
CSS样式
}
//满足()中的查询条件,就会应用{}中的CSS样式
- 例如:
@media(max-windth:800px){
body{
background: red;
}
}
//如果某个媒体的最大宽度为800px(0-800之间),
那么它就会应用这个样式。
@media (min-width:321px) and (max-width:375px){
body{
background:orange;
}
}
//同时满足两个条件,大于等于321,小于等于375
三、动态rem
- 什么是rem?
rem是一个length单位 - MDN中对rem的定义是:
这个单位代表根元素的 font-size 大小(例如 元素的font-size)。当用在根元素的font-size上面时 ,它代表了它的初始值。
即:
如果设置 html 的font-size
为20px ,那么 1rem就等于20px。
这样的话,就可以根据根元素html的font-size
值来写各元素的尺寸大小。
在script标签中写入以下代码:
<script>
var pageWidth = window.innerWidth //获取到页面的宽度
document.write('<style>html{font-size:' + pageWidth + 'px}</style>')
</script>
那么,在写CSS的时候就可以根据想要的不同尺寸,以rem为单位来写宽度和高度。
例如:
.xxx{
width:0.4rem;
height:0.2rem;
margin:0.05rem 0.05rem;
}
不过此时html的字体大小就太大了,只需要在body中另写一个font-szie
就行了。
四、对rem进行微调
- 以上这样写过之后,宽高中的rem都是小数,既不好写又不好看,所以,让
html
的font-size
的尺寸等于window.innerWidth/10
,这样就好了。 - 在需要比较精细的地方,例如
1px
的border
,或者是body
中的font-size
,就直接写px
,混用rem
、px
、em
。