һ
 ¼ע

QQ¼

ֻһٿʼ

̳ WEBҳǰ뿪 WEBҳܱ

[̸] Ӧʽҳ- ƶipad˿ܽᣨResponsive Web Design

[]
11850 С 2014-7-24 17:30:40
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţ¼ע  

x
PStatus"> С 2014-7-24 17:34 ༭

һЩӦʽҳֱʼ...ϣѧӦʽҳа

ӦʽWeb(Responsive Web design)ǣ ҳ뿪ӦûΪԼ豸(ϵͳƽ̨Ļߴ硢Ļ)ӦӦ͵ʵʽɶ෽ɣͲ֡ͼƬCSS media queryʹõȡ

1meta ǩ

õֻiOSAndroidǻwebkitںˣwebkitHTML5ֱ֧ȽϺãͷʱhtml5ʽ<meta>ǩпþĿȣֵű2.0豸ʵʳߴ
  1. <meta name="viewport" content="initial-scale=2.0,width=device-width" />
ƴ
עҳŴ豸ʵʳߴʾmetaǩһ1.0

  1. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
ƴ
עuser-scalable=noͨmetaǩýֹûҳ棬user-scalable=yes

  1. <meta content=email=no name=format-detection />
ƴ
ע豸ҪҳеʶΪ绰

2ýѯ

ýѯжý()ʵֲͬչʽòͬcssڲͬý͡

оòͬýòͬcssʽ

ʽ1

  1. @media screen and (max-width:900px){
  2. <ul type="1" class="litype_1">body{ background:#666;}
  3. <ul type="1" class="litype_1">}</ul></ul>
ƴ





[color=rgb(51, 102, 153) !important]ƴ
ע豸ӿڿС900pxʱbodyıɫΪ#666

  1. @media screen and (max-width:900px) and (min-width:400px){<font face="verdana,">
  2. </font>body{ background:#666;}<font face="verdana,">
  3. </font>}
ƴ
  1. color=rgb(51, 102, 153) !important
ƴ


ע豸ӿڿ400px-900px֮ʱbodyıɫΪ#666

ʽ2
  1. <link rel="stylesheet" media="screen and (max-width:500px) and (min-width:100px)" href="one.css">
ƴ


  1. color=rgb(51, 102, 153) !important
ƴ


ע豸ӿڿ100px-500px֮ʱ򣬵one.css


  1. <link rel="stylesheet" media="screen and (max-width:900px) and (min-width:500px)" href="two.css">
ƴ
  1. color=rgb(51, 102, 153) !important
ƴ


ע豸ӿڿ500px-900px֮ʱ򣬵two.css

ʽ3
  1. @import url("phone.css") screen and (max-width:900px);
ƴ



  1. color=rgb(51, 102, 153) !important
ƴ



ע豸ӿڿС900pxʱphone.css

ýѯʱõ豸ӿڿȣwidthĻȣdevice-width,õĻУ

widthӿڿȡ
heightӿڸ߶ȡ
device-widthȾĿȣ˵豸ĻĿȣ
device-heightȾĸ߶ȣ˵豸Ļĸ߶ȣ
orientation豸ں

3ڵӦʽҳ

2ַʽԷٵӦʽҳ֣

ʽ1϶ڴСȻ߸߶
ʽ2Dreamweaver Ԥ

4Сλ

ӦʽwebһemΪĵλemԵλemԵĻ׼СemдĻͿԽctrl+ctrl-ʱɵҳ⡣
עĬΪ16px 1em = 16px

5ʹcss3

webkithtml5ֱ֧ȽϺãǾܵcss3ȥʵԲǡӰ֮Ч...

ҪһԪ100%ʾֱһ̶padding-leftpadding-right1pxı߿ô죿

ʱcss3box-sizingó...

5㣬ԺɵҳӦͬ豸Ļȡ

6ӵʽ

֪ض豸ԵʹýѯЧѾרiPadж򵥡
ֲصȱݣ仰˵Ӧδı仯Ŀǰǣҳ沶׽ýѯõĶϵ㣬Ȼ󲼾ַ仯ڲ׽һӿڶϵ֮ǰҳ澲ֹ䡣ҪõIJԡ
ԸӿڵϱдӦCSSʽ޷δֵܳ豸һƣһ̶ӦδķչĿǰĽв걸
ĿǰЧһӦƣҪӦʽơǵӦͻ֮ǰ鶯Ҫ㣬ҪĹ̶޸ijٷֱȲ֡

7ٷֱȲ

ΪʲôðٷֱȲ֣

ijӿڴýѯõĹ̶ȷΧ֮⣨ijδ֪δ豸ӿڣҳҪˮƽҪһƣӿжʾֻýѯ趨һЩ̶ӿڡ

̶ȲתΪٷֱȲֹʽ

boxȵֵ / Ԫظ = ٷֱȿֵ

磺Ϊ980px; һboxĿΪ900px
Ҫһٷֱȿ = ԭĹ̶ȣֵñ98%   60%   80%ȣԴڣĸٷֱȿȸʺۣܿΪٷֱȶ١

ҪõboxĿȰٷֱֵǣboxȵֵ900 / box 㣨980px=  0.918367
һboxĿȰٷֱȾҪΪ 91.8367%

ٷֱͼƬ

ͼƬðٷֱȿʵͼƬӦš

Ϊ˲ͼƬŹʧЧǿԸͼƬ׷max-width = ͼƬPX


Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
б

ֹ

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2019-9-18 00:25

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б