Как подключить css на телефоне

Как подключить css на телефоне

Данное руководство устарело. Актуальное руководство: Руководство по ASP.NET Core

Последнее обновление: 31.10.2015

Учитывая особенности мобильных устройств — размеры, поддержку тех или иных стилей CSS и т.д. — может потребоваться определить какой-то особенный стиль для мобильных устройств.

В CSS2 уже было решение в виде правила media , которое позволяет указать устройство, для которого используется данный стиль:

    .

Правило media=»handheld» указывает, что стили в mobile.css будут применяться к мобильным устройствам, в то время как правило media=»screen» применяется к десктопным сайтам.

Однако многие современные мобильные браузеры по умолчанию считают, что страница предназначена для десктопов, поэтому в любом случае применяет правило media=»screen» . Поэтому на подобное решение не стоит полагаться.

Для решения этой проблемы в CSS3 были введен механизм CSS3 Media Query. Например, чтобы применить стиль только к мобильным устройствам мы можем написать так:

     .

Значение атрибута media screen and (max-device-width:480px) говорит нам о том, что стили из файла mobile.css будут применяться к тем устройствам, максимальная ширина экрана которых составляет 480 пикселей — то есть фактически это и есть мобильные устройства.

Как вариант, можно использовать правила CSS3 Media Query в самом файле css:

@media screen < body < background-color: red; >/*Далее остальные стили*/ > @media screen and (max-device-width:480px) < body < background-color: blue; >/*Далее остальные стили*/ >

К примеру настройка стилей под смартфоны, планшеты и десктопы может выглядеть так:

/*Стили только для смартфонов*/ @media screen and (max-device-width:480px) < body < background-color: blue; >/*Далее остальные стили*/ > /*Стили только для планшетов*/ @media screen and (min-device-width:481px) < body < background-color: red; >/*Далее остальные стили*/ > /*Стили только для десктопов*/ @media screen and (min-width:769px) < body < background-color: yellow; >/*Далее остальные стили*/ >

Применяемые функции в CSS3 Media Query:

• aspect-ratio : отношение ширины к высоте области отображения (браузера)
• device-aspect-ratio : отношение ширины к высоте экрана устройства
• max-width/min-width и max-height/min-height : максимальная и минимальная ширина и высота области отображения (браузера)
• max-device-width/min-device-width и max-device-height/min-device-height : максимальная и минимальная ширина и высота экрана мобильного устройства
• orientation : ориентация (портретная или альбомная)

Например, мы можем задать разные стили для разных ориентаций мобильных устройств:

/*Стили для портретной ориентации*/ @media only screen and (orientation: portrait) < >/*Стили ландшафтной ориентации*/ @media only screen and (orientation: landscape)

Таким образом, мы меняем лишь определение стилей в зависимости от устройства, а сами стили css по сути остаются теми же, что мы используем для создания обычных сайтов. Теперь посмотрим, как мы можем создавать мобильные приложения непосредственно на платформе ASP.NET MVC 4.

Как подключить CSS файл к HTML странице?

Пока стили CSS не подключить к HTML странице, никакого эффекта от их использования не будет. Существует несколько способов, как это можно сделать.

Для тех, кто любит смотреть в формате видео.

Для тех, кто любит читать, инструкция ниже.

Для того, чтобы продемонстрировать, как работает каждый из этих способов, возьмем, для примера, html-файл со следующим содержимым.

Задача стилей CSS, которые будут подключаться, сделать элемент абзаца

красным цветом.

       
Абзац
   

Во всех примерах, результат на веб-странице будет один и тот же. Вы увидите вот такой красный абзац текста.

1 вариант. Внутри открывающего тега с помощью атрибута style.

Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.

Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента

.

       
Абзац
   

Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.

2 вариант. Внутри элемента style.

Еще один способ подключения стилей CSS, это воспользоваться элементом с атрибутом type=»text/css». Указание этого атрибута обязательно.

Давайте посмотрим, как это выглядит на конкретном примере.

    p     
Абзац
   

3 вариант. Подключение внешнего файла стилей.

И последний вариант подключения стилей CSS является использование элемента link, который позволяет подключать к HTML странице внешние файлы.

Обратите внимание на атрибуты, которые указываются у этого элемента.

Они тоже являются обязательными. В атрибуте href указывается путь к css файлу, который нужно подключить.

        
Абзац
   

Файл style.css содержит следующих код:

Эти 3 способа подключения стилей CSS очень часто используются на практике. Советую вам поэкспериментировать с этими примерами на своем компьютере. В будущем, это вам очень сильно пригодиться.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:

Не подключаются стили .css к .html файлу при переносе проекта на смартфон с компьютера

Дело обстоит следующим образом: Я создал небольшой .html файл, подключил к нему .css стили. Реализовывал всё это на компьютере. Открывал файл через Yandex Browser, Mozilla Firefox — всё работает исправно, все стили подключены. Прописывал внутри .css файла @media запросы, которые применяют соответственные стили под ширину экрана. Собственно, решил проверить, как это всё будет работать на смартфоне. (К слову, все файлы скинул туда в том порядке и папках, как и на компьютере, значит всё подключено по правильным путям). Но когда уже на смартфоне я открываю этот .html документ через любой браузер (Yandex Browser для мобильных, Google Chrome для мобильных), то никакие стили там не отображаются (выглядит файл, как просто вёрстка на html, без css. Значит стили не подключены). Как это понимать и как решить данную проблему: ведь просто перенёс всё на смартфон, но уже нету подключения. Если я не полностью описал проблему, то скажите, что нужно дополнить в комментариях. Заранее спасибо Путь к .css файлу:

Только что все стили из .css файла на смартфоне помещал в:

Работает так то всё хорошо, но оставлять такие стили очень не хотелось бы. Да и вообще проблему решить хочется не таким способом. Не желательно бы все стили держать в одном файле .html. Как минимум это неудобно и не эргономично.

Не применяется CSS в мобильной версии, что делать?

Ребят, всем привет, недавно поменял дизайн на сайте, заменил все измененные файлы обратно на хостинг. И все вроде бы хорошо, дизайн изменился, НО только в десктопной версии (и в режиме адаптива в браузерах). При попытке посмореть с мобильного устройства, HTML правки применились, а CSS остался тот же, который и был до изменения сайта. Что делать в таком случае?

• Вопрос задан более трёх лет назад
• 4193 просмотра

1 комментарий

Простой 1 комментарий