HTML CSS mobile black magic

Question

Итак, я сделал ошибку разработчиков noob и сделал стандартную веб-страницу перед мобильной версией. Поэтому, естественно, когда я открываю свою веб-страницу с помощью мобильного телефона, она полностью перепутана. Я могу написать файл css для мобильных устройств и связать его, как бы то ни было Удивление, знает ли кто-нибудь о черной магии html или css, которую я могу добавить в свои файлы в качестве исправления.

Я манипулировал содержимым видового экрана Ширина дисплея и @media, но решение ускользает от меня.

Снова я новичок, но преданный так благодарен заранее.

Answer 1

Вы можете настроить свой файл, используя этот CSS

@media only screen and (max-width: 720px) { 
    body { 
     background-color: lightblue; 
     margin: 0px; 
    } 
} 

720px среднего размера большинство смартфонов. Вам нужно будет добавить эту мету-тег в HTML-странице, а также

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Надеется, что это помогает

Answer 2

легкий путь будет переместить все на рабочий стол-зависимого код в медиа-запрос min-width который выглядит следующим образом :

@media screen and (min-width: 1000px) 

Где 1000px - это место, где ваш веб-сайт должен переключиться на мобильный стиль. Таким образом, весь ваш рабочий стол CSS будет применен до вашей первой точки останова. В этом примере, как только вы окажетесь ниже 1000 пикселей, ваш CSS, ориентированный на рабочий стол, перестанет применяться, и ваш мобильный CSS сможет взять верх.

Разместите свой мобильный CSS вне всех ваших медиа-запросов. После остановки рабочего стола CSS браузер возвращается к «стандартным» мобильным CSS.