pc專案自適應手機螢幕

2021-10-10 10:22:28 字數 1068 閱讀 6787

"viewport" content=

"width=device-width,initial-scale=1.0,user-scalable=no"

/>

方法一(通過js獲取螢幕寬度):

// 解析度大於等於1680,大部分為1920的情況下,呼叫此css

if(window.screen.width >=

1680

)// 解析度再在1600-1680的情況下,呼叫此css

else

if(window.screen.width >=

1600

)// 解析度小於1600的情況下,呼叫此css

else

<

/script>

方法二(通過@media特性):

<

!-- 解析度低於1280,採用test-

01.css樣式表 --

>

"stylesheet" media=

"screen and (max-device-width:1280px)" href=

"test-01.css"

>

<

!-- 解析度高於1400,採用test-

02.css樣式表 --

>

"stylesheet" media=

"screen and (min-device-width:1440px)" href=

"test-02.css"

>

"screen"

>

/*解析度低於1280,採用下面的樣式*/

@media screen and

(max-device-width:

1280px)

/*解析度高於1440,採用下面的樣式*/

@media screen and

(min-device-width:

1440px)

<

/style>

網頁自適應手機以及各種螢幕

自適應網頁設計 responsive web design 日期 2012年 5月 1日 隨著3g的普及,越來越多的人使用手機上網。移動裝置正超過桌面裝置,成為訪問網際網路的最常見終端。於是,網頁設計師不得不面對乙個難題 如何才能在不同大小的裝置上呈現同樣的網頁?手機的螢幕比較小,寬度通常在600畫...

移動頁面自適應手機螢幕寬度

網上關於這方面的文章有很多,重複的東西本文不再贅述,僅提供思路,並解釋一些其他文章講述模糊的地方。1 使用meta標籤,這也是普遍使用的方法,理論上講使用這個標籤是可以適應所有尺寸的螢幕的,但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 cont...

移動頁面自適應手機螢幕寬度

網上關於這方面的文章有很多,重複的東西本文不再贅述,僅提供思路,並解釋一些其他文章講述模糊的地方。1 使用meta標籤,這也是普遍使用的方法,理論上講使用這個標籤是可以適應所有尺寸的螢幕的,但是各裝置對該標籤的解釋方式及支援程度不同造成了不能相容所有瀏覽器或系統。首先解釋該標籤的含義 解釋 cont...