现在的网页一般要求兼容pc端和移动端
首先我们要知道浏览器对于html元素都自带有一些样式，并且不同的浏览器的样式还不一样，而这些样式也会影响我们的代码效果，所以在写网页前，我们需要先重置浏览器的这些样式http://www.jq22.com/webqd6168
1.如果只需要兼容pc端，一般使用px作为单位，比如设定一个div的宽，width:400px;
如果div需要根据窗口大小自动适应的话，则需要使用百分比，
比如一个div的宽度，width:80%;那么这个div的宽度就始终为父元素宽度的80%，这个百分比要怎么算？即设计稿div的宽度/设计稿宽度
编写pc网页的适应方法有两种，一种是使用百分比（使用百分比只需要外部盒子设置好宽高，内容使用百分比即可，如果设计稿尺寸改变时，改外部盒子的宽高即可），
一种是使用媒体查询来根据不停的窗口尺寸设置不同的样式：
@media screen and (max-width:1920px){
.page {
background:blue;
}
}
@media screen and (max-width:1280px){
.page {
background:red;
}
}
以上代码表示
在窗口宽度大于1280且小于等于1920时，class为page这个盒子的背景色为蓝色
在窗口宽度小于等于1280，class为page这个盒子的背景色为红色
2.如果只需要兼容移动端，一般使用rem做单位，同时在head中写入如下代码，意为内容的宽高为设备的宽高
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
rem默认情况下1rem=16px，如果需要改变rem和px的转换比列，只需要html,body{ font-size:24px; }就可以将1rem的px比列转换为24px
一般拿到的移动端设计稿为750px
而我们写网页时，一般以375px作为参考，所以我们要设置html,body{font-size:37.5px;}，也就是把375px划分为10份
此时，当设计稿上有一个宽为450px的盒子时，我们可以算出450/2/37.5=6，所以我们只需要给这个盒子写上width:6rem就可以了，这个450/2/37.5的2是哪来的？750/375=2
3.需要兼容pc和移动端
一般分两种情况，
1）pc端显示与移动端显示一致
<link rel='stylesheet' href='./css/index.css' media='screen and (min-width: 750px)'>
<link rel=
'stylesheet'
href=
'./css/index1.css'
media=
'screen and (max-width: 750px)'
>2）移动端显示另外一种样式
需要使用js判断设备的属性，如果是移动端，则使用移动端的样式https://www.cnblogs.com/qingsong/articles/10037797.html