当前位置: 动力学知识库 > 问答 > 编程问答 >

html - How do I make my simple website mobile friendly?

问题描述:

I have a simple webpage with just a full size image background. What do I do to make it mobile friendly? The css looks like this:

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;

}

网友答案:

First, like Dany Code said don't put a background image on "html" tag but on the body.

If you don't like the result of background-size:cover; at a certain breakpoints of the viewport size your can always make different css rules for those specific media queries.

If you want the image on phones, to appear a certain wY different then they appear on desktop, you can use the " @media screen and ( max-width: 480px) { your css code here for the iphone specific } "

网友答案:

The question is very unclear but since you asked for mobile compatibility I would suggest bootstrap

Bootstrap has classes for mobile & desktop sites and its easy to use. It follows the grid system. And has different classes to support different viewports:

  • col-xs- ~ Extra small devices
  • col-sm- ~ Small devices
  • col-md- ~ Medium devices
  • col-lg- ~ Large devices
网友答案:

Ok you looking for somthing like this?

And by the way try to put nothing on the html in your CSS if then use the body and put 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>
分享给朋友:
您可能感兴趣的文章:
随机阅读: