以demo為例
企業(yè)建站必須是能夠以充分展現(xiàn)企業(yè)形象為主要目的，是企業(yè)文化與產(chǎn)品對外擴展宣傳的重要窗口，一個合格的網(wǎng)站不僅僅能為公司帶來巨大的互聯(lián)網(wǎng)上的收集和信息發(fā)布平臺，成都創(chuàng)新互聯(lián)公司面向各種領(lǐng)域：成都房屋鑒定等網(wǎng)站設(shè)計、全網(wǎng)營銷推廣解決方案、網(wǎng)站設(shè)計等建站排名服務(wù)。
!--必要樣式--
link rel="stylesheet" type="text/css" href="css/component.css" /
!--[if IE]
script src="js/html5.js"/script
![endif]--
/head
body
div class="container demo-4"
div class="content"
div id="large-header" class="large-header"
canvas id="demo-canvas"/canvas
h1 class="main-title"Morning Light/span/h1
/div
nav class="codrops-demos"
a href="index.html"Demo 1/a
a href="index2.html"Demo 2/a
a href="index3.html"Demo 3/a
a class="current-demo" href="index4.html"Demo 4/a
/nav
/div
/div!-- /container --
script src="js/rAF.js"/script
script src="js/demo-4.js"/script
只要有必要的CSS樣式文件 和相應(yīng)的div再有JS文件就可以了
HTML網(wǎng)頁的開發(fā)中，需要對大小不一的屏幕兼容，使圖片在不同的設(shè)備中可以展示預(yù)期的效果。自適應(yīng)屏幕的寬度，利用css中background屬性可以實現(xiàn)
工具/材料
瀏覽器，文本編輯器
新建一個HTML文件，代碼如下圖
打開HTML文件所在的文件夾，雙擊文件，跳轉(zhuǎn)到瀏覽器
改變?yōu)g覽器大小，發(fā)現(xiàn)圖片沒有變化，顯示不全
在所在文件夾下，新建一個樣式文件，命名為 auto.css，代碼如下
在HTML文件中加上對樣式文件的引用，返回文件夾，雙擊HTML文件，發(fā)現(xiàn)瀏覽器的變化會引著圖片一起變化，自適應(yīng)屏幕的大小
感應(yīng)式設(shè)計，簡單來說，就是當(dāng)用不同設(shè)備訪問時，能夠根據(jù)設(shè)備的寬度和高度對設(shè)備進行動態(tài)的適配；例如，用iPhone4、iPhone5、iPhone6、PC、iPad訪問同一個網(wǎng)址，正好能打開一個適合該設(shè)備的一個HTML5的頁面，不留白邊，不變形。這就算是感應(yīng)式設(shè)計了，也就是本文說的“屏幕自適應(yīng)”。由于設(shè)備分辨率不同，長寬比不同，如果設(shè)計一次，就要適應(yīng)所有的屏幕（包括PC），這個幾乎是不可能的。主要有以下三種情況：
1. 如果等比例縮放，內(nèi)部位置關(guān)系會發(fā)生變化，會嚴(yán)重影響用戶體驗；同時，設(shè)備屏幕之間不存在等比例的關(guān)系，所以同樣會有部分屏幕內(nèi)容無法顯示或留白邊；
2. 如果把小屏幕適配好，放在更高的大屏幕里面，那兩邊就會有白邊；或者把圖扯大，這樣就會變形；
3. 如果把大屏幕適配好，放在小屏幕中，就有些部分會丟失。
除非借助未來的AI（人工智能）的發(fā)展，否則很難自動解決這個問題。以前的網(wǎng)站設(shè)計，其實也是分開幾種版面進行設(shè)計的，例如，根據(jù)寬度為多少時候采用一種設(shè)計板式。
所以，我就納悶了，現(xiàn)在HTML5工具到底是如何實現(xiàn)感應(yīng)式的呢？
經(jīng)研究發(fā)現(xiàn)，一共有兩種方式：
第一種，偽“感應(yīng)式”設(shè)計：（HTML5模板類方案）
上圖是HTML5模板類測試結(jié)果，依次是iPhone4、iPhone5、iPhone6
可以看出iPhone4時，變形最嚴(yán)重，iPhone5效果最好，iPhone6是等比例縮放后，兩側(cè)邊緣，有些像素顯示不了。
因此，這種“感應(yīng)式”，稱之為偽“感應(yīng)式”HTML5工具，在設(shè)計時不會留白邊，但是要求盡量把內(nèi)容都往中間放，需要設(shè)計一張名為“背景”的底圖，用于拉伸時用。
存在的問題：
1. 內(nèi)容都要居中放置，別放上下個邊；例如，把按鈕放到最下面，iPhone打開后，就會看不到按鈕；
2. 不可能適應(yīng)PC、Pad等設(shè)備。
結(jié)論：
簡單、應(yīng)急時使用。
第二種，多版面感應(yīng)式設(shè)計：（VXPLO互動大師方案）
用于互動大師，通過添加 Device控件的方式，實際上還是需要設(shè)計幾個版面（設(shè)計上多數(shù)可以Ctrl-C +Ctrl-V，所以設(shè)計上并不算麻煩），因此本質(zhì)上是真正的“感應(yīng)式”設(shè)計，只要稍微勤快點兒，是可以一個URL地址，完美適應(yīng)多個屏幕的，包括PC和Pad。用于互動大師，通過添加 Device控件的方式，實際上還是需要設(shè)計幾個版面（設(shè)計上多數(shù)可以Ctrl-C +Ctrl-V，所以設(shè)計上并不算麻煩），因此本質(zhì)上是真正的“感應(yīng)式”設(shè)計，只要稍微勤快點兒，是可以一個URL地址，完美適應(yīng)多個屏幕的，包括PC和Pad。
結(jié)論：要做真正的“感應(yīng)式”設(shè)計，自動適應(yīng)多個屏幕，又不想寫代碼，就只能用互動大師去做。設(shè)計中不會出現(xiàn)任何變形或丟失情況，不過需要多設(shè)計幾個版面，一般如果是手機端的輕應(yīng)用設(shè)計iPhone 4 5 6的分辨率就可以了。
解決方案1：
首先要在html頁面頭部加上下面的代碼;viewport"，不懂可以百度;content="，一些小的模塊可以用固定尺寸;meta , name="。再就是css中要應(yīng)用到媒體查詢，不能不用固定尺寸。
其次要把頁面中的寬度修改為百分比;width=device-width; ，也就是@media;initial-scale=1"
解決方案2：
建議你看一下網(wǎng)上的教程或者案例，自己對比學(xué)習(xí)再寫。
建議：如果是小白的話，要不然不會自適應(yīng)屏幕大小的，只要編寫的html代碼符合html5規(guī)則就行html5不是轉(zhuǎn)化的，建議看一下html5標(biāo)簽文檔
解決方案3：
看之前是怎么做的，最好都調(diào)整成百分比的，這樣最省事。
1，輸入position：fixed；top：0；left：0；將整個div固定在屏幕的頂部和左側(cè)。
2、輸入width：100％；height：100％；min－width：1000px；這個可以適合div的高度和寬度，而min－width是為了實現(xiàn)讓屏幕寬度在1000px以內(nèi)時，div的大小保持不變。
3、輸入background-size: cover;-webkit-background-size: cover;-o-background-size: cover;使圖片隨屏幕大小同步縮放，但是有部分可能會被裁切，不過不至于會露白，下面兩句是為chrome和opera瀏覽器作兼容。
4、輸入background－position：center0；使圖片的位置，居中，靠左對齊。
圖片分為背景圖片和通過img標(biāo)簽引入的圖片，前者可以通過media query自動的切換不同分辨率的版本，但是在不支持background image size的瀏覽器中背景圖片無法無級的調(diào)整大?。ㄒ簿褪窃趍edia query切換css的點上可以換一張不同分辨率的圖，但是沒法兒獲得兩張分辨率中間大小的版本），而且在很多情況下（比如cms中）并不適合用背景圖片。
如果是img標(biāo)簽引入的圖片，可以使用延遲加載的方式來加載，在實際加載圖片之前先用js檢查窗口寬度，然后加載不同分辨率的圖片，比如寬度=480,就加載80px寬度的圖片，480 寬度 = 768，加載120px的圖片， 寬度 768則加載160px的圖片，如果寬度是600px怎么辦呢，通過百分比來縮放120px的圖片達(dá)到合適的結(jié)果。
這樣做的好處是對于移動設(shè)備來說，下載的圖片會小一些，減少網(wǎng)頁加載的時間。但是問題是豎屏向橫屏切換或者擴大瀏覽器窗口寬度時圖片會由于放大而產(chǎn)生一定的模糊感。
響應(yīng)式設(shè)計中對于圖片的考慮應(yīng)該從布局設(shè)計就開始，盡量使圖片在各個窗口寬度下的尺寸不要相差過大，通過排布更多的內(nèi)容而不是擴大圖片的尺寸來填充由于瀏覽器窗口擴大帶來的空間。這樣可以有效的減少圖片放大模糊的問題。
重慶分公司
重慶分公司
