運用@media實現網頁自適應

@media screen and (min-width: 768px){ //>=768的裝置 }

@media screen and (min-width: 992px){ //>=992的裝置 }

@media screen and (min-width: 1200){ //>=1200的裝置 }

注意下順序，如果你把@media (min-width: 768px)寫在了下面那麼很悲劇，

@media screen and (min-width: 1200){ //>=1200的裝置 }

@media screen and (min-width: 992px){ //>=992的裝置 }

@media screen and (min-width: 768px){ //>=768的裝置 }
 

因為如果是1440,由於1440>768那麼你的1200就會失效。

所以我們用min-width時，小的放上面大的在下面，同理如果是用max-width那麼就是大的在上面，小的在下面

@media screen and (max-width: 1199){ //<=1199的裝置 }

@media screen and (max-width: 991px){ //<=991的裝置 }

@media screen and (max-width: 767px){ //<=768的裝置 }

#元素重疊
1.指定float值 : left /right
行內元素也會變成隱形的塊元素，元素會脫離文件的普通流，向左或右浮動，直到其外邊緣碰到包含框或另一個浮動框。
2. 指定position值relative
可以相對於其在普通流中的位置偏移，原本所佔的空間仍保留。
3. 指定position值absolute
行內元素也會隱形變成塊元素，元素會脫離文件的普通流，相對於最近的已定位祖先元素偏移，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊偏移。
4. 指定position值fixed
元素會脫離文件的普通流，相對於瀏覽器視窗偏移，固定在瀏覽器的某個位置。

https://www.cnblogs.com/xcsn/p/4664404.html