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

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

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

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

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

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

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

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

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

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