В последней паре монтирований я сделал несколько Android-приложений с веб-технологией HTML + CSS + JavaScript и PhoneGap, чтобы упаковать приложения для Android Market.
Разработка для Android действительно сложна, потому что у вас нет стандартных размеров экрана, как для iPhone или iPad, поэтому сделать идеальный дизайн px практически невозможно в Android.
Необходимость плавного дизайна в Android в некоторых случаях заставила меня задуматься над тем, как сделать простой и эффективный CSS-макет, который я могу использовать в качестве основы в своих будущих приложениях.
Я просто пытался сделать одну колонку с жидким телом и фиксированными полями.
Если у вас есть некоторый опыт работы с CSS, вы будете знать, что с помощью CSS всегда сложно добиться смешения px и плавного макета.
Как это можно сделать в CSS?
Вероятно, есть несколько решений этой проблемы, но я хотел реализовать решение, которое будет работать практически в любом браузере. Естественно, нам нужно это решение только для мобильных браузеров.
Решение:
width:auto;
.row { margin: 10px }
Вы не верите мне, что это будет работать?
Давайте рассмотрим код:
/ * Вам не нужно указывать float: none, потому что это значение по умолчанию, но в некоторых случаях вам нужно перезаписать предыдущий float * /
float: none;
/ * Состояние ширины по умолчанию — auto, вам не нужно писать это, за исключением случаев, когда вы хотите перезаписать некоторые предыдущие операторы width * /
width: auto;
/ * В дальнейшем мы хотим использовать position: absolute, начиная с того элемента, который нам нужен: * /
position :lative;
/ * Мы можем использовать px, ems,% для полей * /
margin: 10px 20px;
/ * И мы можем также добавить отступы, границы и закругленные углы и другие вещи .. * /
padding:10px; border: 10px solid #ccc; -moz-border-radius: 7px; -webkit-border-radius: 7px; border-radius: 7px; clear:both;
Проблемы с этим решением:
если у нас есть
изображения, они в некоторых случаях вырываются из макета.
Чтобы решить эту проблему, мы можем использовать:
/ * float: left или right * /
float: left;
Это решение может решить проблему с изображением, но в некоторых случаях откроет другую проблему (небольшой текст), макет не займет весь экран.
Другое решение:
использование max-width и min-width при этом больше, чем самое большое изображение. Это решение будет работать, но не удобно.
Окончательное решение:
переполнение: скрыто;
Вы можете
прочитать больше здесь .
Мы можем использовать это решение не только для Android, но и для любого другого телефона с приличной поддержкой HTML, CSS.
Это решение также прекрасно работает с мобильными
адаптивными макетами .
>> Вот
Отзывчивый Layout Demo1
>> Вот
Отзывчивый Layout Demo2
>> Здесь актуально
Android App Рабочая сборка с этим CSS Solution .
Вывод :
Создание макетов для мобильных телефонов в большинстве случаев является сеткой из одного столбца, если мы не знаем размер этого устройства, как в случае многих телефонов Android, может быть разумно использовать эластичный столбец с полями px.
Для достижения этого в CSS у нас есть пуленепробиваемое решение:
.anynameyoulike, ul>li {
width: auto;
float: none;
overflow: hidden;
margin:10px;
}
Вы также можете добавить отступы, границы, закругленные углы, тени …
Это решение также работает для создания адаптивных макетов.
Дайте мне знать, если у вас есть какие-либо вопросы, предложения или комментарии.