Question

我有一个只有全尺寸图像背景的简单网页。我该怎么做才能让它适合移动设备？ 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;
}

Answer 1

好的，你在寻找像这样的东西吗？

顺便说一句，如果然后使用html并放置body

，请尝试在CSS中的margin:0px;上放置任何内容

＆＃13;

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;
}

＆＃13;

<body>


</body>

＆＃13;

Answer 2

问题非常不明确，但由于您要求提供移动兼容性，我建议bootstrap

Bootstrap有移动版和移动版课程。桌面网站及其易于使用。它遵循网格系统。并且有不同的类来支持不同的视口：

col-xs-~超小设备
col-sm-~小型设备
col-md-〜中型设备
col-lg-〜大型设备

Answer 3

首先，就像Dany Code所说的那样，不要在“html”标签上放置背景图片，而是放在身体上。

如果你不喜欢background-size的结果：cover;在视口大小的某个断点处，您始终可以为这些特定的媒体查询制定不同的css规则。

如果你想要手机上的图像，看起来有些不同然后它们出现在桌面上，你可以使用“@media屏幕和（最大宽度：480px）{你的css代码在这里为iPhone专用}”

如何让我的简单网站移动友好？

3 个答案: