1.視口

公司主營業(yè)務(wù)：網(wǎng)站設(shè)計制作、成都網(wǎng)站制作、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)公司是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊有機(jī)會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)公司推出衢州免費做網(wǎng)站回饋大家。

視口是移動設(shè)備上用來顯示網(wǎng)頁的區(qū)域，一般會比移動設(shè)備可視區(qū)域大，寬度可能是980px或者1024px，目的是為了顯示下整個為PC端設(shè)計的網(wǎng)頁，這樣會讓移動端出現(xiàn)橫向滾動條，為了避免這種情況，移動端會將視口縮放到移動端窗口的大小，這樣會讓網(wǎng)頁不容易觀看，可以使用meta標(biāo)簽，name="viewport"來設(shè)置視口的大小，將視口的大小設(shè)置為和移動設(shè)備可視區(qū)一樣的大小。

2.視網(wǎng)膜屏幕（retina屏幕）清晰度解決方案

圖像在視網(wǎng)膜屏幕上顯示的大小和在一般屏幕上顯示的大小一樣，但是由于視網(wǎng)膜屏幕的物理像素點比一般的屏幕小，圖像在上面好像是被放大了，圖像會變得模糊，為了解決這個問題，可以使用比原來大一倍的圖像，然后用CSS樣式強(qiáng)制把圖像的尺寸設(shè)為原來圖像尺寸的大小。

3.background新屬性

（1）background-size：

length：用長度值指定背景圖像大小，不允許負(fù)值

percentage：用百分比指定背景圖像大小，不允許負(fù)值

auto：背景圖像的真實大小

cover：將背景圖像等比例縮放到完全覆蓋容器，背景圖像有可能超出容器

contain：將背景圖像等比例縮放到寬度和高度與容器的寬高相等，背景圖像始終被包含在容器內(nèi)

4.PC級移動端頁面適配方法

（1）全適配：響應(yīng)式布局+流體布局

（2）移動端適配：

流體布局+少量響應(yīng)式
基于rem的布局

（3）流體布局

就是使用百分比來設(shè)置元素的寬度，元素的高度按實際高度寫固定值，流體布局中，元素的邊線無法用百分比，可以使用樣式中的計算函數(shù)calc（）來設(shè)置高度，或者使用box-sizing屬性將盒子設(shè)置為從邊線計算盒子尺寸。

calc（）
可以通過計算的方式給元素加尺寸，比如：width：calc（25%-4px）;

box-sizing
content-box默認(rèn)的盒子尺寸計算方式

border-box設(shè)置盒子的尺寸計算方式為從邊框開始，盒子的尺寸，邊框和內(nèi)填充算在盒子尺寸內(nèi)。

    菜單
    菜單
    菜單
    菜單

（4）響應(yīng)式布局

式使用媒體查詢方式，通過查詢?yōu)g覽器寬度，不同的寬度應(yīng)用不同的樣式塊，每個樣式塊對應(yīng)的是該寬度下的布局方式，從而實現(xiàn)響應(yīng)式布局。響應(yīng)式布局的頁面可以適配多種終端屏幕（pc、平板、手機(jī)）

    1.哈哈哈
    2.哈哈哈
    3.哈哈哈
    4.哈哈哈

本文名稱：HTML5與CSS3視口-retina屏幕適配
網(wǎng)頁URL：http://weahome.cn/article/gogidc.html