html頁面不同解析度下居中顯示同樣效果

2022-03-25 06:28:12 字數 467 閱讀 9246

本篇文章對於一些剛步入web前端的小夥伴可能會有很大幫助

剛步入前端的小夥伴經常會遇到這樣乙個問題:我們寫好的頁面,在不同解析度下,顯示就不如人意了。

出現這種問題的主要原因就是頁面在當前解析度下,使用了定死的寬度或者統一浮動到了左側,這樣放在大的解析度下,整個頁面會出現整體向左的現象,解決這種問題有兩種方案:

1.使用包裹標籤,內容的標籤使用margin: 0 auto;

css:

.wrap

.container

html:

需要注意的是:內容的寬度必須要有固定的值,然後相對於包裹的寬度(解析度寬度)居中

2.如果使用了定位的話:

css:

.wrap

.container

html:

只需要left:50%,然後margin-left: -(width/2)就可以了

前端頁面適應不同解析度

前端開發要考慮到不同解析度電腦的頁面展示問題,在開發者電腦上的介面在使用者電腦上開啟可能出現很大變形。解決方案主要有 簡單介紹一下 即針對不同的解析度,開發不同的css樣式,在介面載入時,先判斷使用者螢幕解析度,在應用相應的css 相比較,這種方法最複雜,而且如果系統面向大眾,需要作很多不同的css...

Android不同解析度適配

適配可以分為 layout land 橫屏布局 layout port 豎屏布局 layout 1920x1080 或者layout land 1920x1080 layout port 1920x1080 注 如果適配的布局檔案中,沒有當前機型,當前機型會選擇相差最小的解析度的配置檔案進行適配 l...

網頁不同解析度適配

你大聲的嚷著你的手機解析度就是1920 1080的,這是你攢了足足兩個月的錢後在小公尺官網買的紅公尺手機,絕不可能有假。你寫了乙個寬為 960px 的 div,用手機的瀏覽器橫屏開啟後,你期望這個該死的 div 會和在電腦上的瀏覽器載入出來一樣的效果,只佔螢幕的一半。結果卻讓你納了血悶,明明電腦上解...