響應(yīng)式網(wǎng)頁重點(diǎn)

單一個(gè)css文件? 一個(gè)網(wǎng)站只寫一個(gè)css文件，所有的css樣式全部寫在一個(gè)css文件里，index.css或者 base.css。

max-width??網(wǎng)頁的初始化樣式寫上，例如去掉所有元素的內(nèi)外邊距等，版心一定是最大寬度，不是寬度。

%? 網(wǎng)頁所有的盒子的寬度和內(nèi)外邊距/間距全部使用百分比，這樣寫的頁面沒有固定寬高，縮放屏幕去看，就算不寫響應(yīng)式，也不會(huì)太亂，響應(yīng)式的時(shí)候只需要修改少量布局樣式即可，例如flex和浮動(dòng)這樣設(shè)置平行排列去掉改成縱向排列...。

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

img??盡量不用背景圖片，因?yàn)楸尘安缓米鲰憫?yīng)，只能用rem。最好寫img圖片，讓圖片撐滿盒子，如果圖片上面有其他的內(nèi)容，把圖片上面的元素使用一個(gè)定位盒子寫上去。

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

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

使用媒體查詢寫響應(yīng)式，pc端的各屏幕響應(yīng)，改變版心的最大寬度，不要亂就行。1000px以下的響應(yīng)式，就是手機(jī)端的頁面響應(yīng)，需要一個(gè)盒子一個(gè)盒子去修改元素的排列方式，包括字體大小，邊距大小等，手機(jī)端要做到看起來精致。

position? 定位的元素，在pc端響應(yīng)時(shí)把top和left值調(diào)整即可，在手機(jī)端，這些定位的元素需要重新布局，一般是去掉定位，讓其正常排列（注意，無論是pc端還是手機(jī)端，做響應(yīng)式的目的就是為了不讓網(wǎng)頁排列亂，一般手機(jī)端沒有設(shè)計(jì)圖的，排列方式自由發(fā)揮，但要排列的精致）