һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+

[CSS] @media screenԲͬƶ豸-Ӧʽ

[]
308811 С 2015-7-10 21:07:42
| ʾȫ¥
1F

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

Ҫ ¼ ſػ鿴ûʺţע  

x

device-pixel-ratio豸ĻĿӿɼ߶ȱʡ

device-width豸ĻĿӿȡ

orientation Ļlandscape Ǻportrait ipad ෴

/* iPhone 4 C */


  1. <p>@media</p>
  2. <p>only screen and (-webkit-min-device-pixel-ratio : 1.5),</p>
  3. <p>only screen and (min-device-pixel-ratio : 1.5) {</p>
  4. <p>/* Styles */</p>
  5. <p>}</p>
ƴ



/* iPads (portrait) C */

  1. <p>@media only screen</p>
  2. <p>and (min-device-width : 768px)</p>
  3. <p>and (max-device-width : 1024px)</p>
  4. <p>and (orientation : portrait) {</p>
  5. <p>/* Styles */</p>
  6. <p>}</p>
ƴ


/* Smartphones (portrait and landscape) C */

  1. <p>@media only screen</p>
  2. <p>and (min-device-width : 320px)</p>
  3. <p>and (max-device-width : 480px) {</p>
  4. <p>/* Styles */</p>
  5. <p>}</p>
ƴ


/* Smartphones (landscape) C */

  1. <p>@media only screen</p>
  2. <p>and (min-width : 321px) {</p>
  3. <p>/* Styles */</p>
  4. <p>}</p>
ƴ


/* Smartphones (portrait) C */

  1. <p>@media only screen</p>
  2. <p>and (max-width : 320px) {</p>
  3. <p>/* Styles */</p>
  4. <p>}</p>
ƴ


/* iPads (portrait and landscape) C */

  1. <p>@media only screen</p>
  2. <p>and (min-device-width : 768px)</p>
  3. <p>and (max-device-width : 1024px) {</p>
  4. <p>/* Styles */</p>
  5. <p>}</p>
ƴ


/* iPads (landscape) C */

  1. <p>@media only screen</p>
  2. <p>and (min-device-width : 768px)</p>
  3. <p>and (max-device-width : 1024px)</p>
  4. <p>and (orientation : landscape) {</p>
  5. <p>/* Styles */</p>
  6. <p>}</p>
ƴ


/* iPads (portrait) C */

  1. <p>@media only screen</p>
  2. <p>and (min-device-width : 768px)</p>
  3. <p>and (max-device-width : 1024px)</p>
  4. <p>and (orientation : portrait) {</p>
  5. <p>/* Styles */</p>
  6. <p>}</p>
ƴ

/* DesktoPS and laptops C */

  1. <p>@media only screen</p>
  2. <p>and (min-width : 1224px) {</p>
  3. <p>/* Styles */</p>
  4. <p>}</p>
ƴ


/* iPhone 4 C */

  1. <p>@media</p>
  2. <p>only screen and (-webkit-min-device-pixel-ratio : 1.5),</p>
  3. <p>only screen and (min-device-pixel-ratio : 1.5) {</p>
  4. <p>/* Styles */</p>
  5. <p>}</p>
ƴ


/* Large screens C */

  1. <p>@media only screen</p>
  2. <p>and (min-width : 1824px) {</p>
  3. <p>/* Styles */</p>
  4. <p>}</p>
ƴ

Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
ڸt 2017-11-8 20:08:46
| ʾȫ¥
Ƽ
ɿ ȫ Ư   136*31665559  ΢ͬ  п ȫֵhѯƽ̨ ܲ鵽ȫƯ յѯû  ٸ  ö  
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
qihuo80 2015-7-23 09:05:53
| ʾȫ¥
Ƽ
ܸרҵƽ̨ƱͶͻʽƿø׬ǮԻףƸǿǿֲʱ𡢺ŻԴáܸרҵʵޡ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| С 2015-9-7 17:39:11
| ʾȫ¥
Ƽ

лл
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
kaorou37 2015-7-27 12:17:42
| ʾȫ¥
3F
Ҫ,¥ͷDz
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
 ¥| С 2015-7-30 13:02:50
| ʾȫ¥
4F
ʵðת
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
kaorou37 2015-8-10 15:54:47
| ʾȫ¥
5F
Ҫ,¥ͷDz
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
ѩ 2015-9-7 12:30:16
| ʾȫ¥
6F
ף¥,һۣ

С
лл  ظ 2015-9-7 17:39
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
fhuj3d96 2016-12-27 08:32:05
| ʾȫ¥
9F
Ҳ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
fhuj3d96 2017-1-11 00:13:02
| ʾȫ¥
10F
ֵղأҶ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
12һҳ
б

ֹ

²

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

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

GMT+8, 2017-11-24 13:09

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б