CSS / HTML / JS: на что обратить внимание при создании веб-сайта с мобильным макетом

#javascript #html #css #responsive-design

#javascript #HTML #css #адаптивный дизайн

Вопрос:

Я создаю веб-сайт, который должен иметь разные мобильные макеты в зависимости от размера экрана устройства, но я не хочу создавать совершенно новые макеты для каждого устройства. Итак, мне было интересно, есть ли вещи, на которые мне нужно обратить внимание, которые плохо конвертируются в мобильный макет? Или как настроить оригинал для масштабирования на небольших устройствах. Большое спасибо

Комментарии:

1. Загуглите «адаптивный дизайн веб-сайта» и, вероятно, сначала прочтите это .

2. Только одна остановка меньше фреймворка

Ответ №1:

Читайте о медиа-запросах:

http://www.w3.org/TR/css3-mediaqueries/

Затем прочитайте об адаптивных макетах, выполненных исключительно с использованием CSS:

http://css-tricks.com/6731-css-media-queries/

Ответ №2:

В основном это касается стилей, а иногда и javascript (если вы хотите создать адаптивный дизайн), посмотрите, какой CSS следует загружать для разных устройств и как использовать

http://podlipensky.com/post/2011/08/25/What-CSS-file-to-load-for-mobile.aspx

http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

И здесь вы можете прочитать об адаптивном веб-дизайне

http://www.alistapart.com/articles/responsive-web-design/

http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/