PC端和移動端自適應問題解決方法

2021-10-14 04:20:41 字數 1623 閱讀 9737

簡單理解為可視區域最大寬度為600px,即大於600px下不生效。

@media screen and (max-width: 600px) 

}

簡單理解為可視區域最小寬度為900px,即大於900px下生效。

@media screen and (min-width: 900px) 

}

總結為:如果對min 就是如果寬度在大於min時生效, max 如果寬度小於max 時生效。

直接在link中判斷裝置的尺寸,然後引用不同的css檔案:

mediatype:

all——用於所有多**裝置

print——用於印表機

screen——用於電腦、平板、智慧型手機等

speech——用於螢幕閱讀器

not: not是用來排除掉某些特定的裝置的,比如 @media not print(非列印裝置)。

only: 用來定某種特別的**型別。

僅電腦裝置中的頁面最大可見區域寬度為 1068px 時

顯示其定義的樣式。

@media only screen and (max-width: 1068px)

all: 所有裝置,這個應該經常看到。

@media screen and (min-width: 1200px)

@media screen and(min-width: 960px) and (max-width: 1199px)

@media screen and(min-width: 768px) and (max-width: 959px)

@media screen and(min-width: 480px) and (max-width: 767px)

@media screen and (max-width: 479px)

@media (min-width: 768px)

@media (min-width: 992px)

@media (min-width: 1200)

@media (max-width: 1199)

@media (max-width: 991px)

@media (max-width: 767px)

@media (min-width:321px) and (max-width: 639px)

@media與@media screen的區別了吧,沒錯,@media screen的css在列印裝置裡是無效的,而@media在列印裝置裡是有效的,這就是它們的區別了。

px : 我們最基礎的單位(畫素)

em : 相對於當前父節點字型的大小 ---- 1em = 父節點字型大小

rem: 相對於當前根節點字型的大小 ---- 1rem = 根(html)節點字型大小

vw: 當前視窗寬度 ---- 1vw = 1%視窗寬度

vh: 可以理解成當前乙個螢幕高度(一頁高度) ---- 1vh = 1%視窗寬度

vmin: vw和vh中較小的那個

vmax: vw和vh中較大的那個

解決PC端和移動端自適應問題?

通常需要考慮到不同電腦螢幕尺寸,以及不同手機螢幕大小等問題,解決樣式發生改變的情況,現在主要是採用自適應來解決高度,寬度的,以及自適應問題 現在有很多人的ie瀏覽器都公升級到ie9以上了,所以這個時候就有又很多詭異的事情發生了,例如現在是ie9的瀏覽器,但是瀏覽器的文件模式卻是ie8 為了防止這種情...

移動端PC端自適應

查詢 這段 的幾個引數解釋 width device width 寬度等於當前裝置的寬度 initial scale 初始的縮放比例 預設設定為1.0 minimum scale 允許使用者縮放到的最小比例 預設設定為1.0 maximum scale 允許使用者縮放到的最大比例 預設設定為1.0 ...

網頁自適應pc端和移動端

手機的螢幕比較小,寬度通常在600畫素以下 pc的螢幕寬度,一般都在1000畫素以上 目前主流寬度是1366 768 有的還達到了2000畫素。同樣的內容,要在大小迥異的螢幕上,都呈現出滿意的效果,並不是一件容易的事。很多 的解決方法,是為不同的裝置提供不同的網頁,比如專門提供乙個mobile版本,...