响应式网页重点

单一个css文件  一个网站只写一个css文件，所有的css样式全部写在一个css文件里，index.css或者 base.css。

max-width  网页的初始化样式写上，例如去掉所有元素的内外边距等，版心一定是最大宽度，不是宽度。

%  网页所有的盒子的宽度和内外边距/间距全部使用百分比，这样写的页面没有固定宽高，缩放屏幕去看，就算不写响应式，也不会太乱，响应式的时候只需要修改少量布局样式即可，例如flex和浮动这样设置平行排列去掉改成纵向排列...。

height：auto；  所有的元素盒子都不写高度，高度一律auto。

img  尽量不用背景图片，因为背景不好做响应，只能用rem。最好写img图片，让图片撑满盒子，如果图片上面有其他的内容，把图片上面的元素使用一个定位盒子写上去。

@media screen and ( max-width: 1000px ) 按照上一篇的档位 

https://mp.weixin.qq.com/s/w1NxlrKtrrxevhgz9zlQQA

使用媒体查询写响应式，pc端的各屏幕响应，改变版心的最大宽度，不要乱就行。1000px以下的响应式，就是手机端的页面响应，需要一个盒子一个盒子去修改元素的排列方式，包括字体大小，边距大小等，手机端要做到看起来精致。

position  定位的元素，在pc端响应时把top和left值调整即可，在手机端，这些定位的元素需要重新布局，一般是去掉定位，让其正常排列（注意，无论是pc端还是手机端，做响应式的目的就是为了不让网页排列乱，一般手机端没有设计图的，排列方式自由发挥，但要排列的精致）