css веб дизайн на мобильных устройствах - PullRequest
Новая
       29

css веб дизайн на мобильных устройствах

1 голос
/ 23 марта 2012

Я новичок в веб-разработке. ужасно и по математике

Мне было интересно, как пиксели переводятся с одного размера экрана на другой на веб-странице. Скажем например я уточняю поле слева: 50 пикселей;

если я загружаю эту веб-страницу в своем веб-представлении ipad, я измерил ее (используя программное обеспечение линейки, в px), это действительно 50px если я загружу эту веб-страницу в браузере на рабочем столе, это действительно 50px но при загрузке этой веб-страницы в моем веб-представлении iphone (которое занимает весь экран iphone) она измеряется как 40px, а не 50, как я указал.

  1. уверен, что экран iphone меньше, он нуждается в некотором масштабировании, я думаю ..? это верно?
  2. как выполняется это преобразование? каков процесс? есть какая-то формула?
  3. что это значит для дизайнеров? Как мне узнать правильный размер, который я должен назначить, чтобы макет НЕ ломался на всех экранах?
  4. Обычно я сначала пишу код на большом экране, а затем вижу, как он работает на меньшем экране. это правильный подход.

Я хочу хороший и большой ответ для # 2, может кто-нибудь, пожалуйста, помогите

Ответы [ 4 ]

1 голос
/ 23 марта 2012

Вы перезаписали поля тела? Некоторые браузеры имеют разные значения по умолчанию. Если вы посмотрите на IE6, вы найдете что-то вроде этого:

"По умолчанию поле IE 6 для тела составляет 15 пикселей (сверху и снизу), 10 пикселей (слева и справа)"

Хорошей практикой является использование css-файла с некоторыми значениями по умолчанию для сброса настроек браузера по умолчанию.

0 голосов
/ 21 мая 2013

@ media (минимальная ширина: 1200 пикселей) {

@ media (максимальная ширина: 980 пикселей) {

@ media (максимальная ширина: 979 пикселей) {

@ media (минимальная ширина: 980 пикселей) {

@ media (минимальная ширина: 768 пикселей) и (максимальная ширина: 979 пикселей) {

@ media (максимальная ширина: 768 пикселей){

@ media (максимальная ширина: 767 пикселей) {

@ media (максимальная ширина: 480 пикселей) {

Взято из Joomla 3.0

0 голосов
/ 23 марта 2012

Я настоятельно рекомендую вам взглянуть на относительные размеры ... это будет относительно устройства.Проверьте любую статью о адаптивном веб-дизайне.Значения жесткого пикселя - нет-нет, если вы получите проценты и относительные размеры, это, как правило, устраняет множество проблем.Теперь, если вы новичок в веб-разработке, вам нужно немного изучить, прежде чем погрузиться в адаптивность.Вы также можете, вероятно, немного изучить медиа-запросы.Просто медиа-запрос для временного решения.

0 голосов
/ 23 марта 2012

Я бы посоветовал вам заглянуть в jQuery Mobile и окна просмотра.В основном вам нужно установить все в процентах, а не в фиксированной ширине, потому что у каждого устройства свой размер экрана + вы должны учитывать горизонтальный и вертикальный вид

Эта мета области просмотра обеспечивает размер страницы в 100% от ширины экрана в любом случае: 

 <meta name="viewport" content="initial-scale=1, maximum-scale=1">
...