У меня уже есть сайт. Хочу сделать мобильную версию. В основном я хочу импортировать таблицу с основного сайта на мобильный сайт. Я хочу взять код CSS с основного сайта, который покрывает таблицу, а затем ввести в свой файл CSS для мобильного сайта (я уже добавил HTML-код на мобильный сайт). Проблема в том, что когда я это делаю, он начинает перезаписывать текущий файл CSS и менять дизайн.
Помогите, пожалуйста!!
Вам нужно будет использовать медиа-запросы. Это функция css3. В верхней части вашего html вам нужно поместить следующее:
<meta name="viewport" content="width=device-width" />
Затем в вашем css вы сделаете что-то вроде этого:
@media only screen and (max-width : 320px) {
/* Styles */
}
Это справочный сайт для часто используемых медиа-запросов. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
В основном вам нужно будет сделать это для каждого размера устройства, для которого вы оптимизируете. Кроме того, если у вас их несколько, вы можете получить очень большой файл css. Это может снизить скорость загрузки, особенно на телефоне. В этом случае создайте отдельные файлы css меньшего размера и используйте условные операторы в своем html, чтобы указать, какой css вызывать. В этом случае вам нужно будет использовать что-то вроде этого в вашем html:
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="/assets/css/small-device.css" />
