viktorulyushev: Надо определиться. Либо вам нужен адаптивный сайт. Либо вам просто нужно вписать сайт в область просмотра (в этом случае и делать-то ничего не нужно)
ps
Если вы разработчик, вам бы стоило почитать о том, что такое viewport и какие они бывают.
danforth: Да тут не верстка, а математика =)
Рассчитал ты правильно, только не учел того, что размеры картинок меняются, а отступы - нет. Вот общая пропорция и ломается.
viktorulyushev: Хотите полной адаптивности, пишите width=deivce-width
А то, что сайт выглядит увеличенным, то, скорее всего есть элементы, которые не влазят в область вьюпорта. Смотрите в инспекторе и исправляйте.
Лучше всего такие вещи отследить в хроме в режиме адаптивности с опцией Desktop
Тогда будет просто горизонтальная полоса прокрутки, так, на мой взгляд, проще найти проблемные участки и поправить их.
viktorulyushev: Естественно он их не будет учитывать! Вы же прямо говорите браузеру - "Браузер, будь любезен, считай, что область просмотра равна 1000 пикселей, вне зависимости от реальности".
danforth: Поведение верстки вполне ожидаемое и корректное (правда вам нужно другое поведение)
Высота любого элемента, заданная в процентах работает только тогда, когда у его родителя тоже явно задана высота. В противном случае высчитывается по содержимому.
В данном случае при изменении размеров картинок они пропорционально сжимаются.
Вариант первый решения - заморочиться и подобрать правильные пропорции изображений, учитывая также и промежутки между ними.
Вариант второй - использовать флексы для расположения и object-fit для заполнения (самый простой, но не кроссбраузерный =)
Вариант третий - Зафиксировать высоту картинок
Вариант четвертый - добавить оберток, из которых сделать области по принципу адаптивного квадрата
Наверняка есть и больше вариантов для решения такой простой задачи.
Мансур Закариев Как вариант, можно установить опцию "Change font size (Zoom) with Ctrl+Mouse Wheel" и изменять шрифт колесиком мыши с зажатым контролом.
Более того, скомпиленные файлы еще прогоняют через минификатор (uglify), а после него о читаемости не может быть и речи. Для удобства отладки (чтобы видеть исходники в браузере, ставить врейкпойнты и т.п.) используют карты исходников (sourcemaps)
Андрей Федоров: Под таблицей я имел ввиду свойства display - table, table-cell. Никаких проблемтут при адаптации не возникает.
Но, даже, если вдруг(!) вы используете таблицу (тег table), то она так же просто адаптируется под мобильные изменением свойства display на block (или другое, по обстоятельствам)
Только самое главное тут, что количество этих потоков ограничено. И чем больше соединений (в т.ч. импортов), тем больше может замедлится загрузка сайта.
опять же следует упомянуть про протокол http2, который более оптимально справляется с сериями запросов к одному серверу. Конечно же вспомним, что протокол этот браузерами не поддерживается пока настолько, чтобы вот прямо сейчас его юзать, хотя при определенных обстоятельствах можно. Надеюсь не нужно пояснять что протокол настраивается на сервере, где расположен сайт.
Проще говоря, если вы используете http второй версии, то вам пофиг и вы можете свободно использовать импорты не задумываясь.
SM: Ну так и нужно отвечать )
Потому что span по-умолчанию строчный элемент, размеры строчного элемента определяются его содержимым. А раз размер элемента равен его содержимому, то выравнивание визуально видно не будет. Хотя оно есть и работает, внутри элемента. А вот что бы выровнять сам строчный элемент, выравнивание следует задавать его родителю.
Tutucu: Песочницу он скинул, чтобы вы там оформили свой пример, чтобы отвечающие могли вживую ознакомиться с проблемой, а не разбирали простыни вашего кода.
ps
Если вы разработчик, вам бы стоило почитать о том, что такое viewport и какие они бывают.