視口

視口是移動裝置上用來顯示網頁的區域，一般會比移動裝置可視區域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設計的網頁，這樣帶來的後果是移動端會出現橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端視窗的大小。這樣會讓網頁不容易觀看，可以用 meta 標籤，name=“viewport ” 來設定視口的大小，將視口的大小設定為和移動裝置可視區一樣的大小。

設定方法如下( 快捷方式：meta:vp + tab )

視網膜螢幕（retina螢幕）清晰度解決方案

視網膜螢幕指的是螢幕的物理畫素密度更高的螢幕，物理畫素可以理解為螢幕上的一個發光點，無數發光的點組成的螢幕，視網膜螢幕比一般螢幕的物理畫素點更小，常見有2倍的視網膜螢幕和3倍的視網膜螢幕，2倍的視網膜螢幕，它的物理畫素點大小是一般螢幕的1/4,3倍的視網膜螢幕，它的物理畫素點大小是一般螢幕的1/9。

影象在視網膜螢幕上顯示的大小和在一般螢幕上顯示的大小一樣，但是由於視網膜螢幕的物理畫素點比一般的螢幕小，影象在上面好像是被放大了，影象會變得模糊，為了解決這個問題，可以使用比原來大一倍的影象，然後用css樣式強制把影象的尺寸設為原來影象尺寸的大小，就可以解決模糊的問題。

background新屬性 
background-size:

• length：用長度值指定背景影象大小。不允許負值。
• percentage：用百分比指定背景影象大小。不允許負值。
• auto：背景影象的真實大小。
• cover：將背景影象等比縮放到完全覆蓋容器，背景影象有可能超出容器。
• contain：將背景影象等比縮放到寬度或高度與容器的寬度或高度相等，背景影象始終被包含在容器內

基於rem的佈局

首先了解em單位，em單位是參照元素自身的文字大小來設定尺寸，rem指的是參照根節點的文字大小，根節點指的是html標籤，設定html標籤的文字大小，其他的元素相關尺寸設定用rem，這樣，所有元素都有了統一的參照標準，改變html文字的大小，就會改變所有元素用rem設定的尺寸大小。