手機網站建設viewport的使用效果
點擊次數:475 發布時間:2021-04-19
[導讀]: 網站的搭建不僅僅是考慮PC端的搭建和架構,更多的時候是要考慮手機端和移動端的可視覺效果和范圍。
網站的搭建不僅僅是考慮PC端的搭建和架構,更多的時候是要考慮手機端和移動端的可視覺效果和范圍。手機網站的搭建和設置更多的時候是使用viewport的視窗優化效果,手機網站使用的是微互動。網站的設定大概達到460PX的時候,如若其它的元素超過這個限度,都以這限度為標準。雖然VIEWPORT能提供很好效果的可視化窗口,但還是要根據不同人群和受眾的實際需要和其閱讀手機網站時的所處環境和氛圍而進行網頁視窗效果的設計架構和內容創作。
曾經有一句經典的話語歸納viewport的使用效果,viewport的大小決定了CSS設置像素的多寡恰好能適用于整個屏幕,好比方:viewport=320,這樣就是算如果設置div的寬度為320px,div就恰好能鋪滿整個屏幕大小。
蘋果手機的分辨率為:
iphone5:640*1136(像素)
320*568(邏輯分辨率)
iphone6:750*1334(像素)
375*667(邏輯)
可以使用代碼來使得viewport的寬度等同于蘋果手機的邏輯分辨率。