视口
在早期的时候我们没有专门针对手机尺寸写的页面，所以在用手机浏览页面的时候我们看到的都是专门针对PC端的页面，在这种情况下页面会被严重压缩，而且会极大的影响页面的结构和布局，为了解决这个 问题，苹果公司提出了视口的概念，因为我们早期的PC端的页面的版心一般是960px，为了容纳这个页面，我们在手机建立一个虚拟的区域，大小一般为980px，来容纳PC的页面，以方便用户来浏览页面
但是在如今移动端快速发展的时候，我们有了专门针对手机屏幕尺寸的的移动端页面，所以在写移动端的页面的时候我们需要调整视口的宽度，保证页面内容会在手机屏幕尺寸大小的页面上进行展示
<meta name="viewport" content="width=device-width ,initial-scale=1.0,user-scalable=no,maximun-scale=1.0,minimum-scale=1.0">
<meta name="viewport"> <!--告诉浏览器如何调整设备的视口大小-->
<meta name="viewport" content="width=device-width"> <!--告诉浏览器根据当前设备的尺寸调整视口的大小-->
<meta name="viewport" content="initial-scale=1.0"> <!--初始缩放比例为1 ，该声明和width是同样的效果，但是为了保证所有的浏览器都能兼容，所以我们都会写-->
<meta name="viewport" content="user-scalbale-no"> <!--设置用户不可以对页面大小进行缩放-->
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0"> <!--设置用户对页面的最大缩放比例为1.0，最小缩放比例为1.0-->
媒体查询
媒体查询可以让我们在不同屏幕尺寸的的设备下，为元素加载不同的css样
<style>
html,body{
height: 100%;
}
<!--media代表媒体查询，screen代表电脑设备，也可以是打印机，或者设置all，代表所有设备-->
@media screen and (max-width: 500px ){<!--在屏幕尺寸小于500px时body背景颜色为skyblue-->
body{
background-color: skyblue;
}
}
@media screen and (min-width: 501px) and (max-width: 800px){<!--在屏幕尺寸为501-800px时，背景颜色为灰色-->
body{
background-color: #ccc;
}
}
@media screen and (min-width: 900px){<!--在屏幕尺寸为900px以上时，body背景颜色为yellowgreen-->
body{
background-color: yellowgreen;
}
}
</style>
rem布局
在正常的UI设计稿件的时候一般设置大小为640/750px大小，我们一般选择将稿件等分为20份（20份在设备大小和稿件大小一般可以除尽，我们尽量避免出现小数）
那么如果UI稿件为640px大小，每一份的大小为32px，假设UI稿件上有一个160*160大小的元素，那么该元素占整个页面的160/32份
同时我们也将屏幕分为20份，以Iphon为例（屏幕大小为320px），那么每份大小为16px，我们通过媒体查询将html根字体大小设置为16px，那么在UI稿件上160px大小的元素在Iphon5上的实际大小为160/32 rem
补存一个点，rem的大小是根据根字体大小来设定的，也就是html的font-size
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
@media screen and (width: 320px){
html{
font-size: 16px;
}
}
.160px{
width: 160 / 32rem;
height: 160 / 32rem;
}
</style>
</head>
<body>
<div class="160px">
</div>
</body>
</html>
网友评论