廈門(mén)市大(dà)尋網絡主營：系統軟件定制(zhì)開(kāi)發、小(xiǎo)程序開(kāi)發、公衆号開(kāi)發、APP開(kāi)發、信息化軟件開(kāi)發
服務熱線：13850021717/0592-5786385
服務熱線：13850021717/0592-5786385服務熱線：13850021717/0592-5786385發布者：大(dà)尋網絡|TIME : 2017-01-18
廈門(mén)網站(zhàn)建設：一、什麽樣的網站(zhàn)适合做(zuò)自适應
自适應網頁設計(jì)(Responsive Web Design)是指可(kě)以自動識别終端設備屏幕的大(dà)小(xiǎo)從而做(zuò)出相應調整的網頁設計(jì)方法。這種網頁設計(jì)方法完美解決了如何在不同大(dà)小(xiǎo)的網絡設備上(shàng)呈現同樣的網頁效果。大(dà)家(jiā)公認自适應至少(shǎo)有(yǒu)4個(gè)好處:提升用戶體(tǐ)驗；PC端和(hé)移動端SEO保持一緻；避免重複內(nèi)容和(hé)出錯內(nèi)容；鏈接統一。
而自适應比較明(míng)顯的缺陷是，開(kāi)發成本比較高(gāo)，尤其是要構建包含額外編程的複雜的自适應網站(zhàn)，所需的時(shí)間(jiān)會(huì)比較長。如果網站(zhàn)需求較簡單，有(yǒu)許多(duō)開(kāi)源模闆可(kě)供選擇。
對于已經比較成熟PC網站(zhàn)來(lái)說，如果要實現全站(zhàn)的自适應，有(yǒu)可(kě)能需要推掉原來(lái)所有(yǒu)的代碼進行(xíng)重構，時(shí)間(jiān)和(hé)技(jì)術(shù)成本都比較大(dà)，而且如果一個(gè)網站(zhàn)有(yǒu)多(duō)個(gè)portal（入口），會(huì)大(dà)大(dà)增加架構設計(jì)的複雜度，所以現在有(yǒu)很(hěn)多(duō)網站(zhàn)隻在移動端實現了響應式布局設計(jì)。
二、自适應網頁代碼上(shàng)需要做(zuò)出哪些(xiē)調整
1、 阻止移動浏覽器(qì)自動調整頁面大(dà)小(xiǎo)
iOS和(hé)Android浏覽器(qì)都基于webkit核心，這兩種浏覽器(qì)以及其他的很(hěn)多(duō)浏覽器(qì)都支持viewport meta元素覆蓋默認的畫(huà)布縮放設置，隻需在HTML的<head>标簽中插入一個(gè)<meta>标簽，<meta>标簽中可(kě)以設置具體(tǐ)的寬度(如像素值)或者縮放比例2.0(設備實際尺寸的兩倍)，下面是将一個(gè)頁面放大(dà)到設備實際尺寸兩倍顯示的meta标簽示例:
<meta name=”viewport” content=”initial-scale=2.0,width=device-width”/>
2、将網頁修改為(wèi)百分比布局
當某個(gè)浏覽窗口處于媒體(tǐ)查詢固定的範圍之外，網頁就需要水(shuǐ)平滾動才能完整浏覽，而通(tōng)過百分比布局可(kě)以頁面元素根據窗口大(dà)小(xiǎo)在一個(gè)又一個(gè)媒體(tǐ)查詢之間(jiān)靈活修正樣式，具體(tǐ)來(lái)講，就是css代碼不會(huì)指定具體(tǐ)像素寬度：width:xxx px;而是會(huì)指定一個(gè)百分比寬度：width:xx%;或者直接就是width:auto;這裏大(dà)家(jiā)可(kě)以根據一個(gè)簡易的公式将固定像素寬度轉換成對應的百分比寬度：目标元素寬度 ÷ 上(shàng)下文元素寬度 = 百分比寬度
例如：
<div id =”wraper”>
<divid = “header”></div>
</div>
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
margin-right: 10px;
margin-left:10px;
width: 940px;
}
轉換為(wèi)百分比的header區(qū)塊的css為(wèi)：
#header {
margin-right: 10px;
margin-left: 10px;
width: 97.916667% /* 940 ÷ 960 */
}
3、用em替換px
同樣，目标元素寬度 ÷ 上(shàng)下文元素寬度 = 百分比寬度這個(gè)公式也适用于将文字的像素單位轉換為(wèi)相對單位，值得(de)注意的是，現代浏覽器(qì)的默認文字都是16像素，因此一開(kāi)始給body标簽應用下列任何一條規則所産生(shēng)的效果都一樣:
font-size: 100%;
font-size:16px;
font-size: 1em;
例如某網站(zhàn)網站(zhàn)标題相應的樣式:
#logo {
display: block;
padding-top: 75px;
color: #0d0c0c;
font-family: Arial;
font-size: 48px;
}
修改後的樣式如下:
#logo{
display: block;
padding-top: 75px;
color: #0d0c0c;
font-family:Arial;
font-size:3em /* 48 ÷ 16 */
}
4、流動布局（fluid grid）的使用
“流動布局”指的是各個(gè)區(qū)塊的位置都浮動，不是固定不變的。
.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}
這麽做(zuò)的好處是，如果寬度太小(xiǎo)，放不下兩個(gè)元素，後面的元素會(huì)自動滾動到前面元素的下方，不會(huì)在水(shuǐ)平方向溢出，避免了水(shuǐ)平滾動條的出現，大(dà)大(dà)提升了用戶的閱讀體(tǐ)驗。另外，絕對定位（position:absolute）的使用，也要非常小(xiǎo)心。
5、Media Query技(jì)術(shù)的使用
在自适應設計(jì)的技(jì)術(shù)中，css3支持css2.1定義的媒體(tǐ)類型，同時(shí)添加了很(hěn)多(duō)涉及媒體(tǐ)類型的功能屬性，包括max-width(最大(dà)寬度)，device-width(設備寬度，orientation(屏幕定向:橫屏或豎屏)，因此可(kě)以通(tōng)過Media Query加載相應的CSS文件. 例如，下面代碼定義了如果頁面通(tōng)過屏幕呈現，并且屏幕寬度不超過480px,則加載shetland.css
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
同樣可(kě)以創建多(duō)個(gè)樣式表，以适應不同設備或者不同分辨率的寬度範圍，當然更有(yǒu)效的做(zuò)法是将多(duō)個(gè)Media Query整合在一個(gè)樣式表文件中:
@media only screen and (min-devece-width: 320px) and (max-device-width: 480px) {
/* Styles */
}
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
上(shàng)面的代碼中定義的樣式類隻有(yǒu)在浏覽器(qì)屏幕寬度超過600px時(shí)才會(huì)有(yǒu)效。
因此，使用min-width和(hé)max-width可(kě)以同時(shí)判斷屏幕尺寸與浏覽器(qì)實際寬度，如果希望通(tōng)過Media Query作(zuò)用于某種特定設備，但(dàn)忽略在其上(shàng)運行(xíng)的浏覽器(qì)是否由于沒有(yǒu)最大(dà)化尺寸與設備屏幕尺寸不一緻，則可(kě)以使用max-device-width和(hé)max-device-width屬性來(lái)判斷設備本身屏幕尺寸。
Media Query不是唯一的解決方案，同樣可(kě)以通(tōng)過Javascript來(lái)實現自适應設計(jì)，特别是某些(xiē)舊(jiù)浏覽器(qì)無法完美支持CSS3的Media Query時(shí)，它可(kě)以作(zuò)為(wèi)備選方案。當然，我們仍然能借助專業的Javascript庫來(lái)幫助舊(jiù)浏覽器(qì)(IE5+,Firefox 1+,Safari 2等)支持CSS3的Media Queries.使用方法:下載css3-mediaqueries.js,然後在頁面中調用它即可(kě)，例如:
<!--[if lt IE 9]>
<script src=http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js></script>
<![endif]-->
6、 設計(jì)響應式圖片
有(yǒu)很(hěn)多(duō)同比縮放圖片的技(jì)術(shù)，其中有(yǒu)不少(shǎo)是簡單易行(xíng)的，比較流行(xíng)的方法是使用CSS的max-width屬性：
img { max-width: 100%;}
老版本的IE不支持max-width，所以隻好寫成：
img { width: 100%; }此外，windows平台縮放圖片時(shí)，可(kě)能出現圖像失真現象。這時(shí)，可(kě)以嘗試使用IE的專有(yǒu)命令：
img { -ms-interpolation-mode: bicubic; }
或者，Ethan Marcotte的imgSizer.js。
addLoadEvent(function() {
var imgs =
ocument.getElementById("content").getElementsByTagName("img");
imgSizer.collate(imgs);
});
如果有(yǒu)條件的話(huà)，最好能根據屏幕的不同大(dà)小(xiǎo)，加載不同分辨率的圖片。
三、 自适應站(zhàn)點對百度友(yǒu)好的關鍵
1，applicable-device标注應該怎麽寫
有(yǒu)了自适應設計(jì)的網頁，還(hái)要照顧到對百度友(yǒu)好的設計(jì)，即告訴百度“我是自适應頁面”方便百度進行(xíng)識别校(xiào)驗。方法也很(hěn)簡單，隻要在上(shàng)面viewport标簽下面再添加一個(gè)applicable-device标簽就行(xíng)：
<meta name="applicable-device" content="pc,mobile">
表示頁面同時(shí)适合在移動設備和(hé)PC上(shàng)進行(xíng)浏覽。
2， 在使用百度站(zhàn)長平台鏈接提交工具的sitemp進行(xíng)提交時(shí)，要做(zuò)mobile type标記，具體(tǐ)取值：
<mobile:mobile type="pc,mobile"/>
其他網頁取值如下：
<mobile:mobile/> ：移動網頁
<mobile:mobile type="mobile"/> ：移動網頁
<mobile:mobile type="htmladapt"/>：代碼适配
無該上(shàng)述标簽表示為(wèi)PC網頁(廈門(mén)網站(zhàn)建設文章來(lái)自百度新聞)
聯系地址：廈門(mén)市軟件園二期望海路23号之二204|A3~A5
電(diàn)話(huà)：0592-5786385
傳真：0592-5786385
QQ：413141903
您當前位置：
