Sử dụng @Media CSS tạo Responsive cho Website
Đánh giá bài viết tốt

Sử dụng @Media CSS tạo Responsive cho Website

Trong bài này mình sẽ giới thiệu tới các bạn một thuộc tính trong CSS3 dùng để tạo responsive đó là thuộc tính @media.

@media CSS là gì?

@media CSS là một tính năng mới của CSS3, tính năng này cho phép ta tùy chỉnh CSS cho nhiều thiết bị khác nhau từ máy tính cho đến điện thoại smart phone và các thiết bị in ấn. Thuộc tính này có cú pháp như sau:

<code class="css plain">@media not|only mediatype and (media feature) {</code>
<div class="line number2 index1 alt1"><code class="css spaces">    </code><code class="css plain">CSS-Code;</code></div>
<div class="line number3 index2 alt2"><code class="css plain">}

Trong đó mediatype gồm các thuộc tính hay sử dụng sau:

  • all: Dùng cho mọi thiết bị
  • print: Dùng cho máy in
  • screen: Dùng cho máy tính và các thiết bị smart phone

Thực tế vẫn còn nhiều nữa nhưng với lập trình web thì chúng ta thường sử dụng ba thuộc tính đó thôi. Và trước khi đi vào tìm hiểu các thuộc tính thì ban phải phân biệt hai khái niệm sau:

  • Device: Là thiết bị sử dụng website như Laptop, Desktop, Iphone, ..
  • Viewport: Là kích thước hiển thị của giao diện.

Và media featured thì gồm các thuộc tính sau:

  • aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của viewport
  • min-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của viewport
  • max-aspect-ratio: Tỉ lệ tôi đa giữa chiều rộng và chiều cao của viewport
  • color: Số bits cho mỗi màu sắc của device
  • color-index: Số lượng màu sắc mà device có thể hiển thị
  • device-aspect-ratio: Tỉ lệ giữa chiều rộng và chiều cao của device
  • max-device-aspect-ratio: Tỉ lệ tối đa giữa chiều rộng và chiều cao của device
  • min-device-aspect-ratio: Tỉ lệ tối thiểu giữa chiều rộng và chiều cao của device
  • device-height: Chiều cao của device
  • device-width: Chiều rộng của device
  • height: Chiều cao của viewport
  • width: Chiều rộng của viewport
  • max-width: Chiều rộng tối đa của viewport
  • min-width: Chiều rộng tối thiểu của viewport
  • max-height: Chiều cao tối đa của viewport
  • min-height: Chiều cao tối thiểu của viewport
  • min-device-width: Chiều rộng tối thiểu của device
  • max-device-width: Chiều rộng tối đa của device
  • min-device-height: Chiều cao tối thiểu của device
  • max-device-height: Chiều cao tối đa của device
  • orientation: Định hướng của khung nhìn (xoay hoặc không xoay thiết bị)
  • resolution: Độ phân giải của thiết bị đầu ra (sử dụng dpi hoặc dpcm)
Sử dụng @Media với các thiết bị di động và máy tính

Với danh sách các thuộc tính của @media thì ta dễ dàng phát hiện ra các thiết bị. Và sau đây là danh sách các câu query @media cho các thiết bị thông dụng.

Iphone:

<div class="line number1 index0 alt2"><code class="css comments">/* ----------- iPhone 4 and 4S ----------- */</code></div>
<div class="line number2 index1 alt1"></div>
<div class="line number3 index2 alt2"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number4 index3 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number5 index4 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number6 index5 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">480px</code><code class="css plain">)</code></div>
<div class="line number7 index6 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">) {</code></div>
<div class="line number8 index7 alt1"></div>
<div class="line number9 index8 alt2"><code class="css plain">}</code></div>
<div class="line number10 index9 alt1"></div>
<div class="line number11 index10 alt2"><code class="css comments">/* Portrait */</code></div>
<div class="line number12 index11 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number13 index12 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number14 index13 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">480px</code><code class="css plain">)</code></div>
<div class="line number15 index14 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">)</code></div>
<div class="line number16 index15 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) {</code></div>
<div class="line number17 index16 alt2"><code class="css plain">}</code></div>
<div class="line number18 index17 alt1"></div>
<div class="line number19 index18 alt2"><code class="css comments">/* Landscape */</code></div>
<div class="line number20 index19 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number21 index20 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number22 index21 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">480px</code><code class="css plain">)</code></div>
<div class="line number23 index22 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">)</code></div>
<div class="line number24 index23 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) {</code></div>
<div class="line number25 index24 alt2"></div>
<div class="line number26 index25 alt1"><code class="css plain">}</code></div>
<div class="line number27 index26 alt2"></div>
<div class="line number28 index27 alt1"><code class="css comments">/* ----------- iPhone 5 and 5S ----------- */</code></div>
<div class="line number29 index28 alt2"></div>
<div class="line number30 index29 alt1"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number31 index30 alt2"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number32 index31 alt1"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number33 index32 alt2"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">568px</code><code class="css plain">)</code></div>
<div class="line number34 index33 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">) {</code></div>
<div class="line number35 index34 alt2"></div>
<div class="line number36 index35 alt1"><code class="css plain">}</code></div>
<div class="line number37 index36 alt2"></div>
<div class="line number38 index37 alt1"><code class="css comments">/* Portrait */</code></div>
<div class="line number39 index38 alt2"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number40 index39 alt1"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number41 index40 alt2"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">568px</code><code class="css plain">)</code></div>
<div class="line number42 index41 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">)</code></div>
<div class="line number43 index42 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) {</code></div>
<div class="line number44 index43 alt1"><code class="css plain">}</code></div>
<div class="line number45 index44 alt2"></div>
<div class="line number46 index45 alt1"><code class="css comments">/* Landscape */</code></div>
<div class="line number47 index46 alt2"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number48 index47 alt1"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number49 index48 alt2"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">568px</code><code class="css plain">)</code></div>
<div class="line number50 index49 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">)</code></div>
<div class="line number51 index50 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) {</code></div>
<div class="line number52 index51 alt1"></div>
<div class="line number53 index52 alt2"><code class="css plain">}</code></div>
<div class="line number54 index53 alt1"></div>
<div class="line number55 index54 alt2"><code class="css comments">/* ----------- iPhone 6 ----------- */</code></div>
<div class="line number56 index55 alt1"></div>
<div class="line number57 index56 alt2"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number58 index57 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number59 index58 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">375px</code><code class="css plain">) </code></div>
<div class="line number60 index59 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">667px</code><code class="css plain">) </code></div>
<div class="line number61 index60 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">) { </code></div>
<div class="line number62 index61 alt1"></div>
<div class="line number63 index62 alt2"><code class="css plain">}</code></div>
<div class="line number64 index63 alt1"></div>
<div class="line number65 index64 alt2"><code class="css comments">/* Portrait */</code></div>
<div class="line number66 index65 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number67 index66 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">375px</code><code class="css plain">) </code></div>
<div class="line number68 index67 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">667px</code><code class="css plain">) </code></div>
<div class="line number69 index68 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">)</code></div>
<div class="line number70 index69 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) { </code></div>
<div class="line number71 index70 alt2"></div>
<div class="line number72 index71 alt1"><code class="css plain">}</code></div>
<div class="line number73 index72 alt2"></div>
<div class="line number74 index73 alt1"><code class="css comments">/* Landscape */</code></div>
<div class="line number75 index74 alt2"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number76 index75 alt1"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">375px</code><code class="css plain">) </code></div>
<div class="line number77 index76 alt2"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">667px</code><code class="css plain">) </code></div>
<div class="line number78 index77 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">)</code></div>
<div class="line number79 index78 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) { </code></div>
<div class="line number80 index79 alt1"></div>
<div class="line number81 index80 alt2"><code class="css plain">}</code></div>
<div class="line number82 index81 alt1"></div>
<div class="line number83 index82 alt2"><code class="css comments">/* ----------- iPhone 6+ ----------- */</code></div>
<div class="line number84 index83 alt1"></div>
<div class="line number85 index84 alt2"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number86 index85 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number87 index86 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">414px</code><code class="css plain">) </code></div>
<div class="line number88 index87 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">736px</code><code class="css plain">) </code></div>
<div class="line number89 index88 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) { </code></div>
<div class="line number90 index89 alt1"></div>
<div class="line number91 index90 alt2"><code class="css plain">}</code></div>
<div class="line number92 index91 alt1"></div>
<div class="line number93 index92 alt2"><code class="css comments">/* Portrait */</code></div>
<div class="line number94 index93 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number95 index94 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">414px</code><code class="css plain">) </code></div>
<div class="line number96 index95 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">736px</code><code class="css plain">) </code></div>
<div class="line number97 index96 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">)</code></div>
<div class="line number98 index97 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) { </code></div>
<div class="line number99 index98 alt2"></div>
<div class="line number100 index99 alt1"><code class="css plain">}</code></div>
<div class="line number101 index100 alt2"></div>
<div class="line number102 index101 alt1"><code class="css comments">/* Landscape */</code></div>
<div class="line number103 index102 alt2"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number104 index103 alt1"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">414px</code><code class="css plain">) </code></div>
<div class="line number105 index104 alt2"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">736px</code><code class="css plain">) </code></div>
<div class="line number106 index105 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">)</code></div>
<div class="line number107 index106 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) { </code></div>
<div class="line number108 index107 alt1"></div>
<div class="line number109 index108 alt2"><code class="css plain">}

Galaxy phones:

<div class="line number1 index0 alt2"><code class="css comments">/* ----------- Galaxy S3 ----------- */</code></div>
<div class="line number2 index1 alt1"></div>
<div class="line number3 index2 alt2"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number4 index3 alt1"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number5 index4 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number6 index5 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number7 index6 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">) {</code></div>
<div class="line number8 index7 alt1"></div>
<div class="line number9 index8 alt2"><code class="css plain">}</code></div>
<div class="line number10 index9 alt1"></div>
<div class="line number11 index10 alt2"><code class="css comments">/* Portrait */</code></div>
<div class="line number12 index11 alt1"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number13 index12 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number14 index13 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number15 index14 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">) </code></div>
<div class="line number16 index15 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) {</code></div>
<div class="line number17 index16 alt2"></div>
<div class="line number18 index17 alt1"><code class="css plain">}</code></div>
<div class="line number19 index18 alt2"></div>
<div class="line number20 index19 alt1"><code class="css comments">/* Landscape */</code></div>
<div class="line number21 index20 alt2"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number22 index21 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number23 index22 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number24 index23 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">) </code></div>
<div class="line number25 index24 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) {</code></div>
<div class="line number26 index25 alt1"></div>
<div class="line number27 index26 alt2"><code class="css plain">}</code></div>
<div class="line number28 index27 alt1"></div>
<div class="line number29 index28 alt2"><code class="css comments">/* ----------- Galaxy S4 ----------- */</code></div>
<div class="line number30 index29 alt1"></div>
<div class="line number31 index30 alt2"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number32 index31 alt1"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number33 index32 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number34 index33 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number35 index34 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) {</code></div>
<div class="line number36 index35 alt1"></div>
<div class="line number37 index36 alt2"><code class="css plain">}</code></div>
<div class="line number38 index37 alt1"></div>
<div class="line number39 index38 alt2"><code class="css comments">/* Portrait */</code></div>
<div class="line number40 index39 alt1"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number41 index40 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number42 index41 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number43 index42 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) </code></div>
<div class="line number44 index43 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) {</code></div>
<div class="line number45 index44 alt2"></div>
<div class="line number46 index45 alt1"><code class="css plain">}</code></div>
<div class="line number47 index46 alt2"></div>
<div class="line number48 index47 alt1"><code class="css comments">/* Landscape */</code></div>
<div class="line number49 index48 alt2"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number50 index49 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">320px</code><code class="css plain">) </code></div>
<div class="line number51 index50 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number52 index51 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) </code></div>
<div class="line number53 index52 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) {</code></div>
<div class="line number54 index53 alt1"></div>
<div class="line number55 index54 alt2"><code class="css plain">}</code></div>
<div class="line number56 index55 alt1"></div>
<div class="line number57 index56 alt2"><code class="css comments">/* ----------- Galaxy S5 ----------- */</code></div>
<div class="line number58 index57 alt1"></div>
<div class="line number59 index58 alt2"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number60 index59 alt1"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number61 index60 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">360px</code><code class="css plain">) </code></div>
<div class="line number62 index61 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number63 index62 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) {</code></div>
<div class="line number64 index63 alt1"></div>
<div class="line number65 index64 alt2"><code class="css plain">}</code></div>
<div class="line number66 index65 alt1"></div>
<div class="line number67 index66 alt2"><code class="css comments">/* Portrait */</code></div>
<div class="line number68 index67 alt1"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number69 index68 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">360px</code><code class="css plain">) </code></div>
<div class="line number70 index69 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number71 index70 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) </code></div>
<div class="line number72 index71 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) {</code></div>
<div class="line number73 index72 alt2"></div>
<div class="line number74 index73 alt1"><code class="css plain">}</code></div>
<div class="line number75 index74 alt2"></div>
<div class="line number76 index75 alt1"><code class="css comments">/* Landscape */</code></div>
<div class="line number77 index76 alt2"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number78 index77 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">360px</code><code class="css plain">) </code></div>
<div class="line number79 index78 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number80 index79 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) </code></div>
<div class="line number81 index80 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) {</code></div>
<div class="line number82 index81 alt1"></div>
<div class="line number83 index82 alt2"><code class="css plain">}

HTC:

<div class="line number1 index0 alt2"><code class="css comments">/* ----------- HTC One ----------- */</code></div>
<div class="line number2 index1 alt1"></div>
<div class="line number3 index2 alt2"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number4 index3 alt1"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number5 index4 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">360px</code><code class="css plain">) </code></div>
<div class="line number6 index5 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number7 index6 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) {</code></div>
<div class="line number8 index7 alt1"></div>
<div class="line number9 index8 alt2"><code class="css plain">}</code></div>
<div class="line number10 index9 alt1"></div>
<div class="line number11 index10 alt2"><code class="css comments">/* Portrait */</code></div>
<div class="line number12 index11 alt1"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number13 index12 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">360px</code><code class="css plain">) </code></div>
<div class="line number14 index13 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number15 index14 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) </code></div>
<div class="line number16 index15 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) {</code></div>
<div class="line number17 index16 alt2"></div>
<div class="line number18 index17 alt1"><code class="css plain">}</code></div>
<div class="line number19 index18 alt2"></div>
<div class="line number20 index19 alt1"><code class="css comments">/* Landscape */</code></div>
<div class="line number21 index20 alt2"><code class="css plain">@media </code><code class="css value">screen</code></div>
<div class="line number22 index21 alt1"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">360px</code><code class="css plain">) </code></div>
<div class="line number23 index22 alt2"><code class="css spaces">  </code><code class="css plain">and (device-</code><code class="css keyword">height</code><code class="css plain">: </code><code class="css value">640px</code><code class="css plain">) </code></div>
<div class="line number24 index23 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-device-pixel-ratio: </code><code class="css value">3</code><code class="css plain">) </code></div>
<div class="line number25 index24 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) {</code></div>
<div class="line number26 index25 alt1"></div>
<div class="line number27 index26 alt2"><code class="css plain">}

Ipad:

<div class="line number1 index0 alt2"><code class="css comments">/* ----------- iPad mini ----------- */</code></div>
<div class="line number2 index1 alt1"></div>
<div class="line number3 index2 alt2"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number4 index3 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number5 index4 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">768px</code><code class="css plain">) </code></div>
<div class="line number6 index5 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">1024px</code><code class="css plain">) </code></div>
<div class="line number7 index6 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">1</code><code class="css plain">) {</code></div>
<div class="line number8 index7 alt1"></div>
<div class="line number9 index8 alt2"><code class="css plain">}</code></div>
<div class="line number10 index9 alt1"></div>
<div class="line number11 index10 alt2"><code class="css comments">/* Portrait */</code></div>
<div class="line number12 index11 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number13 index12 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">768px</code><code class="css plain">) </code></div>
<div class="line number14 index13 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">1024px</code><code class="css plain">) </code></div>
<div class="line number15 index14 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) </code></div>
<div class="line number16 index15 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">1</code><code class="css plain">) {</code></div>
<div class="line number17 index16 alt2"></div>
<div class="line number18 index17 alt1"><code class="css plain">}</code></div>
<div class="line number19 index18 alt2"></div>
<div class="line number20 index19 alt1"><code class="css comments">/* Landscape */</code></div>
<div class="line number21 index20 alt2"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number22 index21 alt1"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">768px</code><code class="css plain">) </code></div>
<div class="line number23 index22 alt2"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">1024px</code><code class="css plain">) </code></div>
<div class="line number24 index23 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) </code></div>
<div class="line number25 index24 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">1</code><code class="css plain">) {</code></div>
<div class="line number26 index25 alt1"></div>
<div class="line number27 index26 alt2"><code class="css plain">}</code></div>
<div class="line number28 index27 alt1"></div>
<div class="line number29 index28 alt2"><code class="css comments">/* ----------- iPad 1 and 2 ----------- */</code></div>
<div class="line number30 index29 alt1"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number31 index30 alt2"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number32 index31 alt1"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">768px</code><code class="css plain">) </code></div>
<div class="line number33 index32 alt2"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">1024px</code><code class="css plain">) </code></div>
<div class="line number34 index33 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">1</code><code class="css plain">) {</code></div>
<div class="line number35 index34 alt2"></div>
<div class="line number36 index35 alt1"><code class="css plain">}</code></div>
<div class="line number37 index36 alt2"></div>
<div class="line number38 index37 alt1"><code class="css comments">/* Portrait */</code></div>
<div class="line number39 index38 alt2"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number40 index39 alt1"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">768px</code><code class="css plain">) </code></div>
<div class="line number41 index40 alt2"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">1024px</code><code class="css plain">) </code></div>
<div class="line number42 index41 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) </code></div>
<div class="line number43 index42 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">1</code><code class="css plain">) {</code></div>
<div class="line number44 index43 alt1"></div>
<div class="line number45 index44 alt2"><code class="css plain">}</code></div>
<div class="line number46 index45 alt1"></div>
<div class="line number47 index46 alt2"><code class="css comments">/* Landscape */</code></div>
<div class="line number48 index47 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number49 index48 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">768px</code><code class="css plain">) </code></div>
<div class="line number50 index49 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">1024px</code><code class="css plain">) </code></div>
<div class="line number51 index50 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) </code></div>
<div class="line number52 index51 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">1</code><code class="css plain">) {</code></div>
<div class="line number53 index52 alt2"></div>
<div class="line number54 index53 alt1"><code class="css plain">}</code></div>
<div class="line number55 index54 alt2"></div>
<div class="line number56 index55 alt1"><code class="css comments">/* ----------- iPad 3 and 4 ----------- */</code></div>
<div class="line number57 index56 alt2"><code class="css comments">/* Portrait and Landscape */</code></div>
<div class="line number58 index57 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number59 index58 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">768px</code><code class="css plain">) </code></div>
<div class="line number60 index59 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">1024px</code><code class="css plain">) </code></div>
<div class="line number61 index60 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">) {</code></div>
<div class="line number62 index61 alt1"></div>
<div class="line number63 index62 alt2"><code class="css plain">}</code></div>
<div class="line number64 index63 alt1"></div>
<div class="line number65 index64 alt2"><code class="css comments">/* Portrait */</code></div>
<div class="line number66 index65 alt1"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number67 index66 alt2"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">768px</code><code class="css plain">) </code></div>
<div class="line number68 index67 alt1"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">1024px</code><code class="css plain">) </code></div>
<div class="line number69 index68 alt2"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">portrait</code><code class="css plain">) </code></div>
<div class="line number70 index69 alt1"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">) {</code></div>
<div class="line number71 index70 alt2"></div>
<div class="line number72 index71 alt1"><code class="css plain">}</code></div>
<div class="line number73 index72 alt2"></div>
<div class="line number74 index73 alt1"><code class="css comments">/* Landscape */</code></div>
<div class="line number75 index74 alt2"><code class="css plain">@media only </code><code class="css value">screen</code></div>
<div class="line number76 index75 alt1"><code class="css spaces">  </code><code class="css plain">and (min-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">768px</code><code class="css plain">) </code></div>
<div class="line number77 index76 alt2"><code class="css spaces">  </code><code class="css plain">and (max-device-</code><code class="css keyword">width</code><code class="css plain">: </code><code class="css value">1024px</code><code class="css plain">) </code></div>
<div class="line number78 index77 alt1"><code class="css spaces">  </code><code class="css plain">and (orientation: </code><code class="css value">landscape</code><code class="css plain">) </code></div>
<div class="line number79 index78 alt2"><code class="css spaces">  </code><code class="css plain">and (-webkit-min-device-pixel-ratio: </code><code class="css value">2</code><code class="css plain">) {</code></div>
<div class="line number80 index79 alt1"></div>
<div class="line number81 index80 alt2"><code class="css plain">}