Создание мобильной веб-страницы с другим стилем CSS
Я хотел бы знать, буду ли я использовать 3 различных файла CSS, загрузит ли мобильный браузер iPhone / iPad все 3 набора файлов CSS или только тот, который соответствует размеру экрана? используя это.
<link media="only screen and (max-width: 320px)" href="iphone-portrait.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-width: 321px) and (max-width: 480px)" href="iphone-landscape.css" type= "text/css" rel="stylesheet">
<link media="only screen and (min-device-width: 481px)" href="desktop.css" type="text/css" rel="stylesheet">
Я нашел ответ для использования отhttp://www.w3schools.com/html5/html5_app_cache.asp
даже если у вас есть 3 различных файла css для мобильного телефона, и css хранится на iphone, вы уменьшите пропускную способность до 1 загрузки каждого css, и это ускорит работу веб-сайта при использовании меньшей пропускной способности.
создайте файл .htaccess и поместите его в.
AddType text/cache-manifest manifest
затем создайте еще один файл, который называется demo.manifest, и поместите его в
CACHE MANIFEST
# v0.0.1
icon.png
desktop.css
iphone-landscape.css
iphone-portrait.css
Затем на странице HTML вы должны объявить это, выполнив это.
<html manifest="demo.manifest">
как только вы обновите css и файлы, вам просто нужно будет обновить demo.manifest и браузер, загрузив новую версию demo.manifest и все его содержимое еще раз.