һ
 ¼ע

QQ¼

ֻһٿʼ

̳ WEBҳǰ뿪 WEBҳܱ

[ҳ] ֻҳ濪ܽ

[]
10270 happy175 2014-11-17 16:17:46
| ʾȫ¥
1F

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

Ҫ ¼ ſػ鿴ûʺţ¼ע  

x
viewpointĻȿ

Code:
  1. <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
ƴ

ֱ

AndroidҪΪ 480x800, 480x854, 540x960, 720x1280, 800x1280 ֡
ͻ240x320, 320x480, 640x960 ֶ֣ iPhone һ¡
iOS: ҪΪ 320x480, 640x960, 640x1136, 1024x768, 2048x1536, ֡
WPҪΪ 480x800720x1280, 768x1280
iPhone6750*1334iPHone6s 1242*2208

ʹԵλ

1ߡ䡢߽ʹðٷֱ

2em/rem

em:Ը

rem(root element):Ը

PS:嵥λһ(Ĭ16px)


Pixels
EMs
Percent
Points
6px
0.375em
37.5%
5pt
7px
0.438em
43.8%
5pt
8px
0.5em
50%
6pt
9px
0.563em
56.3%
7pt
10px
0.625em
62.5%
8pt
11px
0.688em
68.8%
8pt
12px
0.75
75%
9pt
13px
0.813
81.3%
10pt
14px
0.875
87.5%
11pt
15px
0.938
93.8%
11pt
16px
1em
100%
12pt
17px
1.063em
106.3%
13pt
18px
1.125em
112.5%
14pt
19px
1.188em
118.8%
14pt
20px
1.25em
125%
15pt
21px
1.313em
131.3%
16pt
22px
1.375em
137.5%
17pt
23px
1.438em
143.8%
17pt
24px
1.5em
150%
18pt

ʹbox-flex,òָ

д


  1. .flex-box{
  2.     overflow: hidden;
  3.     display: -webkit-box;
  4.     display: -moz-box;
  5.     display: -ms-flexbox;
  6.     display: flex;
  7.     -webkit-box-orient: horizontal;
  8.     width: 100%; height: 300px;
  9.     margin: 0 auto;
  10.     color: #fff;
  11.     text-align: center;
  12.     font-family: 'Microsoft YaHei';
  13. }
  14. .flex1{
  15.     width: 20%; height: 100%;
  16.     background: #ff8989;
  17.     display: block;
  18. }
  19. .flex2{
  20.     -webkit-box-flex: 1; /* OLD - iOS 6-, Safari 3.1-6 */
  21.     -moz-box-flex: 1; /* OLD - Firefox 19- */
  22.     -webkit-flex: 1; /* Chrome */
  23.     -ms-flex: 1; /* IE 10 */
  24.     flex: 1;
  25.     background: #1bbc9b;
  26. }
  27. .flex3{
  28.     width: auto;
  29.     width: 20%; height: 100%;
  30.     background: #516d81;
  31. }
  32. </font></font>
ƴ

demo:http://www.websjy.com/club/websjy_index/67/


ʹbox-sizingԼٺܶ಻Ҫļ
д
  1. .sizing{
  2.     -moz-box-sizing: border-box;
  3.     -o-box-sizing: border-box;
  4.     box-sizing: border-box;
  5. }
ƴ

ʹ CSS ýѯ
  1. @media screen and (min-width: 640px){
  2.     ʽ
  3. }
ƴ

ʵСɣ

ȥֳ豸ʱֵ͸:
  1. a,button,input{
  2.    -webkit-tap-highlight-color: rgba(0,0,0,0);
  3.    -webkit-tap-highlight-color: transparent;
  4. }
ƴ

ȥinputiosµĬЧ:
  1. input{
  2.     resize: none;
  3.     -webkit-appearance:none;
  4. }
ƴ

ֹתĻʱԶС
  1. html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
  2.     -webkit-text-size-adjust:100%;
  3. }
ƴ



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

ֹ

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

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

GMT+8, 2019-11-15 11:39

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б