最近要寫ui設計規範，先研究一下網頁設計裡的尺寸問題。
一、解析度
網頁設計的尺寸主要和兩個因素有關，乙個是電腦顯示器的解析度，還有瀏覽器的解析度，其實還有一些作業系統，windows或者mac os或者其他的。什麼叫解析度呢，比如說1024×768的，就是橫向有1024個畫素，豎向有768個畫素，整個螢幕可以看成是乙個象棋盤，螢幕的尺寸是14寸還是15寸的，這個尺寸是不會變的，電腦是多大就是多大，變化的是電腦設定的解析度，如果相同尺寸的螢幕，解析度越大畫面就越精細，比如我的電腦，如下圖：
第一張，解析度是800×600的，顯而易見，圖示變得特別大，特別模糊，第二張是1920×1080的，看起來正合適，因為我的電腦解析度就是這個，電腦是多少寸的就是指螢幕的對角線長度，再有，如果兩台裝置都是19寸的，16：9和4:3的屏也是不一樣的，4:3的較大一些。
在這普及乙個小知識，寸和英吋的換算，英吋是英式的，寸是中式的，1英吋＝2.54厘公尺，1寸等於3.3厘公尺，1英吋＝0.762寸。
二、有效可視區域
當下比較流行的螢幕解析度有1024×768,1366×768,1280×800,1280×1024，1440×900,1600×900，1920×1080等。設計網頁時要考慮好瀏覽器的解析度，主流的瀏覽器有ie,谷歌，火狐，歐朋等。
什麼叫瀏覽器的有效可視區域呢，在我理解就是顯示內容的地方，比如開啟乙個網頁後，刨除瀏覽器的工具欄和側邊欄等，真正顯示內容的地方，如下圖：
我電腦裡的瀏覽器是ie11，有效可視區域是畫紅框的部分，每個瀏覽器都有自己不同的有效可視區域，如下面的**
(谷歌的是寬度減去23)
800×600的已經不用考慮了，主流的是1024×768，現在主流的瀏覽器還是以ie為主，所以在設計網頁的寬度的時候保守的還是考慮1003px,在1024×768的解析度下，1003就是ie瀏覽器的有效可視區域的寬度，但是現在越來越多的寬屏正在逐漸佔據市場，所以我個人建議使用1280或者1366的，有效可視區域按照ie的來計算，1280的就是1259，1366的就是1345，如果遇到別的解析度，可以做自適應的調整，現在越來越多的網頁設計的寬度都不是固定不變的，這是乙個流行的趨勢，如下圖：
第一張是我正常的全屏顯示，第二張是我把瀏覽器的長寬調整了，設計時考慮三種情況，第一：固定網頁尺寸，it在設計的時候會按比例顯示，縮小或者放大，第二：固定主要部分的尺寸，然後旁邊留空，小的瀏覽器就放滿，大的瀏覽器就留白比較多，第三：根據不同尺寸做不同設計方案，這種就比較麻煩了，現在主要是依據第二種，有一部分主要的是固定不變的，當解析度變化的時候內容會跟著解析度的寬度來變化，有時候設計的時候圖示和也會隨之而變，這需要前端在**上作調整。
三、主流瀏覽器的介面引數
PC端網頁特效
動態得到相關元素的位置 大小 1.獲得元素距離帶有定位的父元素的位置 2.獲得元素自身的大小 返回的數值都不帶單位 offsettop 可以得到元素的偏移 位置 返回的不帶單位的數值 offsetleft offsetwidth 可以得到元素的大小 寬度和高度 是包含padding border w...
pc端rem適配 自適應PC端網頁製作使用REM
做乙個pc端的網頁,設計圖是1920x1080的.要在常見屏上顯示正常 比例正確可 1280x720 1366x768 1440x900 1920x1080 使用了幾種辦法 1.內容在一屏內顯示的,採用了 內容框 上下左右居中的辦法,裡面的內容絕對於這個內容框定位.這樣一來,在不同大小屏中,內容總是...
網頁自適應pc端和移動端
手機的螢幕比較小，寬度通常在600畫素以下 pc的螢幕寬度，一般都在1000畫素以上 目前主流寬度是1366 768 有的還達到了2000畫素。同樣的內容，要在大小迥異的螢幕上，都呈現出滿意的效果，並不是一件容易的事。很多 的解決方法，是為不同的裝置提供不同的網頁，比如專門提供乙個mobile版本，...