Как сделать мой простой сайт мобильным?

У меня простая веб-страница с полным фоном изображения. Что мне делать, чтобы сделать его мобильным? Css выглядит так:

html{
  background: url(images/grindif1.jpg) 50% no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: green;
  min-height:100%;
  background-size:cover;
}

On a computer, it looks like this (as i want).

And on the phone, it looks like this

-2
источник поделиться
3 ответа

Во-первых, как сказал Dany Code, не помещайте фоновое изображение на тег "html", но на тело.

Если вам не нравится результат background-size: cover; при определенных точках слежения размера окна просмотра вы всегда можете создавать разные правила CSS для этих конкретных медиа-запросов.

Если вы хотите, чтобы изображение на телефонах отображалось не так, как только они появлялись на рабочем столе, вы можете использовать экран "@media" и (max-width: 480px) {ваш код css здесь для конкретного iphone}

+1
источник

Хорошо, ты что-то искал?

И, кстати, попробуйте ничего не поместить в html в CSS, если затем использовать body и поместить margin:0px;

body{
	margin: 0px;
  background: url(http://lorempixel.com/800/600) 50% no-repeat;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
  background-color: green;
  height:100vh;
}
<body>


</body>
+1
источник

Вопрос очень неясен, но так как вы попросили мобильную совместимость, я бы предложил bootstrap

У Bootstrap есть классы для мобильных и настольных сайтов и их простой в использовании. Это следует за сеткой. И имеет разные классы для поддержки разных видовых экранов:

  • col-xs- ~ Дополнительные мелкие устройства
  • col-sm- ~ Маленькие устройства
  • col-md- ~ Средние устройства
  • col-lg- ~ Большие устройства
+1
источник

Посмотрите другие вопросы по меткам или Задайте вопрос