Имам вече направен сайт. Искам да направя мобилна версия на това. По принцип искам да импортирам таблица от основния сайт в мобилния сайт. Искам да взема 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="/bg/assets/css/small-device.css" />
