Successfully reported this slideshow.
Your SlideShare is downloading. ×

адаптивный веб дизайн

Loading in …3
×

Check these out next

1 of 22 Ad
1 of 22 Ad

адаптивный веб дизайн

Download to read offline

Выступление на первой алматинской хабравстрече на тему адаптивного веб-дизайна.

Рахим 'freetonik' Давлеткалиев
http://freetonik.com

Выступление на первой алматинской хабравстрече на тему адаптивного веб-дизайна.

Рахим 'freetonik' Давлеткалиев
http://freetonik.com

Advertisement
Advertisement

More Related Content

Similar to адаптивный веб дизайн (20)

Advertisement

адаптивный веб дизайн

  1. 1. Адаптивный веб-дизайн Рахим Давлеткалиев freetonik.com habrahabr.ru/users/freetonik/ Thursday, 29 March, 12
  2. 2. Заметили ли вы? скорость роста – в 8 раз выше по сравнению с дт следующие 4 года – еще 26x рост! Thursday, 29 March, 12
  3. 3. мобильные приложения < мобильные сайты Thursday, 29 March, 12
  4. 4. адаптивный веб-дизайн ≠ мобильные сайты Thursday, 29 March, 12
  5. 5. Этан Маркотт (Ethan Marcotte) Responsive Web Design 2010 Thursday, 29 March, 12
  6. 6. Thursday, 29 March, 12
  7. 7. Thursday, 29 March, 12
  8. 8. Thursday, 29 March, 12
  9. 9. Адаптивные шрифты • font-size 100% == 16px; • h2 font-size 28px == 28/16 == 1.75em Thursday, 29 March, 12
  10. 10. Адаптивная верстка • Резиновая верстка с шириной в % Thursday, 29 March, 12
  11. 11. Адаптивные картинки • img, video, object {max-width: 100%} • IE6 – width: 100%; Thursday, 29 March, 12
  12. 12. Адаптивные картинки • В Windows IE6 и FF3 при уменьшении размера качество картинки портится Thursday, 29 March, 12
  13. 13. Этан Маркотт нас спасёт! http://unstoppablerobotninja.com/entry/fluid-images/ Thursday, 29 March, 12
  14. 14. Лишний трафик загружается отображается Thursday, 29 March, 12
  15. 15. Решение Responsive Images: Experimenting with Context-Aware Image Sizing (Filament Group) http://bit.ly/g0IDAI <img src="small.r.jpg" data-fullsrc="large.jpg"> Thursday, 29 March, 12
  16. 16. Media queries CSS 2.1 <link rel="stylesheet" type="text/css" href="core.css" media="screen" /> <link rel="stylesheet" type="text/css" href="print.css" media="print" /> CSS3 <link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px) and (resolution: 163dpi)" href="shetland.css" /> Thursday, 29 March, 12
  17. 17. Примеры iPad Portrait: (device-max-width: 768px) iPhone Landscape: (max-device-width: 480px) iPhone 4: (-webkit-min-device-pixel-ratio: 2) ориентация: media="all and (orientation:landscape) Thursday, 29 March, 12
  18. 18. Не все бразуры одинаково полезны Thursday, 29 March, 12
  19. 19. http://code.google.com/p/css3-mediaqueries-js/ Thursday, 29 March, 12
  20. 20. Viewport Thursday, 29 March, 12
  21. 21. Viewport <meta name=”viewport” content=”width=device-width; initial-scale=”1.0”> Thursday, 29 March, 12
  22. 22. Thursday, 29 March, 12

×