ag真人棋牌

莆田網站建設網絡公司電話:400-053-6665
莆田網譽網絡公司,莆田網站建設專家!
新聞動態 建站學院

自適應網頁設計的方法

SUIZHUYUELAIYUEDUODERENSHIYONGSHOUJISHANGWANG,SHIZISHIYINGWANGYESHEJIJISHUBIANDEYUELAIYUELIUXING。ZISHIYINGWANGYESHEJIZHINENGSHIWANGYEZISHIYINGXIANSHIZAIBUTONGDAXIAOZHONGDUANSHEBEISHANGXINWANGYESHEJIFANGSHIJIJISHU。DANGRAN,DUIYIGEXINSHOULAISHUOKENENGTINGQILAIYOUDIANFUZA,QISHITABINIXIANGXIANGDEJIANDANDUOLE(QIANTINIYOUJICHU)。

1、在HTML頭部增加viewport標簽。

ag真人棋牌ZAIWANGZHANHTMLWENJIANDEKAITOU,ZENGJIAviewport metaBIAOQIANGAOSULIULANQISHIKOUKUANDUDENGYUSHEBEIPINGMUKUANDU,QIEBUJINXINGCHUSHISUOFANG。DAIMARUXIA:

ag真人棋牌<meta name="viewport" content="width=device-width, initial-scale=1" />

ag真人棋牌ZHEDUANDAIMAZHICHIChrome、Firefox、IE9YISHANGDELIULANQI,DANBUZHICHIIE8YIJIDIYUIE8DELIULANQI。

IE8JIQIGENGDIBANBENBUZHICHImedia query,KEYISHIYONG media-queries.jsHUO respond.jsJIAOBENSHIXIANZHICHI。

ag真人棋牌<!--[if lt IE 9]> <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> <![endif]-->

2、在CSS文件尾部增加針對不同屏幕分辨率的規則。

ag真人棋牌LIRUSHIYONGRUXIADEDAIMA,KEYIRANGPINGMUKUANDUDIYU480XIANGSUDESHEBEI(RUiPhoneDENG),WANGYECELANYINZANGZHONGBUNEIRONGLANKUANDUZIDONGDIAOJIE。YIXIADAIMAZHENDUIZ-Blog,WordPressXIANGGUANBIAOQIANMINGCHENGZHIXUXIUGAIYIXIAJIKE。

@media screen and (max-device-width: 480px) {

#divMain{

float:none;

width:auto;

}

ag真人棋牌#divSidebar {

display:none;

}

}

3、布局寬度使用相對寬度。

WANGYEZONGTIKUANGJIAKEYISHIYONGJUEDUIKUANDU,DANWANGXIADENEIRONGKUANGJIA、CELANDENGHAOSHIYONGXIANGDUIKUANDU,ZHEYANGZHENDUIBUTONGFENBIANLVJINXINGXIUGAIJIUFANGBIAN。DANGRANYEKEYIBUYONGXIANGDUIKUANDU,NEIJIUXUYAO ZAI @media screen and (max-device-width: 480px) LIMIANZENGJIAGEGEdivDEZHENDUIXIAOPINGMUDEKUANDU,SHIJISHANGGENGMAFAN。

4、頁面使用相對字體(非必要)

ZAIHTMLYEMIANSHANGBUYAOSHIYONGJUEDUIZITI(px),ERYAOSHIYONGXIANGDUIZITI(em),DUIYUDADUOSHULIULANQILAISHUO,TONGCHANGYONG em = px/16 HUANSUAN,LIRU16pxJIUDENGYU1em。

5、圖片自適應(非必要)

ag真人棋牌imgBIAOQIANDEHUA,ZHIXUYAOSHEZHI max-width:100%;HUOwidth:100%;YUJUWEI:img { max-width:98%;}

cssJIAZAIDEbackground-imageRUHEZISHIYINGDAXIAONI,QISHICSS3ZHONGSHIKEYISHIXIANDE,TIANJIARUXIAYUJU:background-size:100% 100%;

GENJUSHANGMIANJIANGSHUDEJIDIANNEIRONG,WOZHENDUIWOBOKEDECSSJINXINGLEYIXIEXIUGAI,FAXIANKEYICONGiPhoneSHOUJILIULANDAOTIYANGENGJIADEYEMIAN。DANYOUYIGEWENTIMEIYOUJIEJUE,JIUSHIDINGBUDAOHANGLANnavbarXIANSHIYOUWENTI,HUANXINGHOUBEIXIAMIANDEWENZHANGGAIZHULE,BUZHIDAOZENYANGNENGGENGHAODIJIEJUEZHEGEWENTI。

JINGGUOWANGYOUTISHI,ZAIDAOHANGLANdivNavbarDEYANGSHILI,JIARUwhite-space:nowrap; overflow:hidden;JIKEJIEJUEZHEGEWENTI。

【返回】