国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 在線咨詢 在線咨詢
15158846557 在線咨詢
所在位置: 首頁 > 營銷資訊 > 網站運營 > 新手小白制作不同屏幕自適應網頁的小訣竅

新手小白制作不同屏幕自適應網頁的小訣竅

時間:2023-09-25 08:36:01 | 來源:網站運營

時間:2023-09-25 08:36:01 來源:網站運營

新手小白制作不同屏幕自適應網頁的小訣竅:小白同學學習網頁制作時,經常會被各種屏幕尺寸,寬度單位搞的一頭霧水,同一個網頁,如何適應筆記本,桌面電腦,平板電腦,手機瀏覽呢?為什么有的頁面在電腦端和手機端看起來不一樣,可以自動適應不同屏幕呢?

不說復雜的解釋,這里只說簡單快速的技巧,等小白熟練了再去理解細節(jié)。

(ps:如果你不想學css,也可以直接線上使用超級單頁 vipcom.cc 的自適應模板,不同技術和設計也可以快速制作漂亮的自適應頁面,如果是想學習的同學可以繼續(xù)往下看)

直接上口訣:用 css 的 media 做處理。

啥意思呢?就好比房間裝修一樣,給你不同大小的房間,你就針對不同房間進行特定的搭配,這個media就是起這個作用,它可以根據(jù)不同的屏幕寬度,指定特定的網頁效果。

比如我把小于600像素寬度的設備統(tǒng)統(tǒng)當手機處理,就可以用下面這個塊。

@media (max-width: 600px) { /** ** 這里面寫手機端的css樣式 **/ .div{ } }以此類推,你還可以繼續(xù)分類。

@media screen and (min-width: 600px) and (max-width:900px) { /** ** 寬度是600到900px ** 這里面寫中等屏幕,比如一些平板等設備 的css樣式 **/ .div{ }}具體寬度,你可以直接修改,我上面僅僅是舉列子,其他寬度就不說了,也是同樣的道理。

這樣的話,表面上看,你好像只做了一個頁面,其實通過media,你把多個子頁面合在同一個頁面了,只不過這個頁面是可變的,屏幕寬度一變,它的樣子也會跟著變。

(這也是為什么自適應的網頁制作更費時間,但是考慮到微信打開一個網頁的概率是如此之高,你又不得不去做)

如上圖,這個就是用media分類寫css,單獨做了不同的樣式,所以就可以自適應。

然后再說說手機端布局的小技巧,新手如果覺得那種像素單位px,rem等單位很麻煩的話,直接用px,然后元素寬度用%代替px就好了。

關鍵詞:適應,訣竅,新手,屏幕

74
73
25
news

版權所有? 億企邦 1997-2025 保留一切法律許可權利。

為了最佳展示效果,本站不支持IE9及以下版本的瀏覽器,建議您使用谷歌Chrome瀏覽器。 點擊下載Chrome瀏覽器
關閉