CSS響應式佈局學習筆記（多種方法解決響應式問題）

時間 2020-09-14

標籤 css 響應佈局學習筆記多種方法解決問題欄目 CSS 简体版

原文原文鏈接

在作web開發的工做中，會遇到須要我給頁面根據設計的要求，進行響應式佈局，這裏跟你們分享下我對於響應式佈局的解決方法：

我主要利用的是CSS3 媒體查詢，即media queries，能夠針對不一樣的媒體類型定義不一樣的樣式，從而實現響應式佈局。也能夠針對不一樣的分辨率設置不一樣的樣式。
在實際操做中，咱們使用到的代碼有：

@media all 用於全部設備 print 用於打印機和打印預覽。css

screen 用於電腦屏幕，平板電腦，智能手機等。 html

speech 應用於屏幕閱讀器等發聲設備。web

orientation:portrait : 豎屏小程序

orientation:landscape : 橫屏微信小程序

注：橫豎屏操做，只是針對移動端的。在PC端屏幕永遠是豎屏的瀏覽器

例如：

@media all and (min-width:500px){微信

　　#box{ background:blue;}佈局

}字體

這段代碼的含義當分辨率>=500px的時候，會識別大括號裏面的代碼

一樣咱們能夠知道：

@media all and (max-width:500px){網站

#box{ background:blue;}

}

這段代碼的含義當分辨率<=500px的時候，會識別大括號裏面的代碼

而當咱們使用外部引入css的時候，可在link標籤上加這樣的代碼：

這是我佈局響應式的css依據，接下來我給你們分享下我經常使用的幾種css單位：

rem

rem單位是相對於字體大小的html元素，也稱爲根元素，也是我開發的時候常常用到的單位。

html {

font-size: 10px; /* 不建議設置 font-size: 62.5%; 在 IE 9-11 上有誤差，具體表現爲 1rem = 9.93px。 */

}

.sqaure {

width: 5rem; /* 50px */

height: 5rem; /* 50px */

}

em

相對於rem是於根元素（html）的字體大小，em則是相對於其父元素的字體大小，且最多取到小數點的後三位

rpx

rpx 是微信小程序解決自適應屏幕尺寸的尺寸單位。微信小程序規定屏幕的寬度爲750rpx，也是我微信小程序開發的經常使用單位。

不管是在iPhone6上面仍是其餘機型上面都是750rpx的屏幕寬度，拿iPhone6來說，屏幕寬度爲375px，把它分爲750rpx後， 1rpx = 0.5px = 1物理像素。

vw 和 vh

vw爲視窗寬度，1vw=視窗寬度的1%

vh爲視窗高度，1vh=視窗高度的1%

這是我開發最爲喜歡的單位，無需作任何換算，還簡單。

看到這裏你可能會疑問，爲何沒有px這個原始的像素單位，我這裏說下個人見解，px設置字體大小時，是比較穩定和精確。可是這種方法存在一個問題，當用戶在瀏覽器中瀏覽咱們製做的Web頁面時，若是改變了瀏覽器的縮放，這時會使用咱們的Web頁面佈局被打破。這樣對於那些關心本身網站可用性的用戶來講，就是一個大問題了，而咱們用剛纔的媒體查詢來進行修改，會很是麻煩（代碼量增長一倍，尚未上面的單位寫的代碼兼容穩定），而如今的頁面開發都是須要你的代碼兼容兩端和各類尺寸的（手機電腦端），對於我來講，px確實已經不能做爲主要開發的單位了。