Html 和 css 移动设备兼容
Html and css mobile compatible
我正在尝试为我朋友的公司制作一个网站，我做了，但它只在台式电脑上看起来不错。在手机和平板电脑上看起来真的很糟糕。我做了很多研究，但找不到如何使用流体布局或任何其他方式。在某些手机上，div 只是放置在奇怪的地方，而在其他一些手机上，它们看起来很小或覆盖整个屏幕。我在页面底部（在手机上）有一个白色的 space。这里有一个link所以你可以看看：http://agrofit.hr/p.s。它是克罗地亚语，但您不需要阅读 :-)))。请尽快提供帮助。谢谢！！！
您应该阅读 css 媒体查询和响应式布局。您还可以查看 bootstrap
等响应式框架作品
尝试使用百分比测量而不是像素测量。
例如：
.example {width: 100%}
而不是：
.example {width: 700px}
也如上所述使用一些 CSS 媒体查询。
例如：
@media screen and (max-width: 700px) {
img {width: 200px}
}
这表示每当有人在屏幕小于 700 像素的设备上查看时，图像将为 200 像素。
希望对您有所帮助。
[编辑] 在移动设备上测试您的网站 -
1) 在Chrome.
中打开你要测试的网页
2) 右击点击'Inspect'
3) 然后灰色的 window 应该会出现在浏览器的底部或右侧。
4) 在新的灰色window左上角会有两个按钮，点击"toggle device toolbar"
您现在可以 select 不同的设备并查看它们在每个设备中的显示方式。
div {
font-size: calc((.05em + 2vmin) + (.05em + 2vmax));
line-height: 115%;
}
这似乎行得通。
我在 Chrome 上使用 Inspect 的设备配置文件进行了测试。
我正在尝试为我朋友的公司制作一个网站，我做了，但它只在台式电脑上看起来不错。在手机和平板电脑上看起来真的很糟糕。我做了很多研究，但找不到如何使用流体布局或任何其他方式。在某些手机上，div 只是放置在奇怪的地方，而在其他一些手机上，它们看起来很小或覆盖整个屏幕。我在页面底部（在手机上）有一个白色的 space。这里有一个link所以你可以看看：http://agrofit.hr/p.s。它是克罗地亚语，但您不需要阅读 :-)))。请尽快提供帮助。谢谢！！！
您应该阅读 css 媒体查询和响应式布局。您还可以查看 bootstrap
尝试使用百分比测量而不是像素测量。
例如：
.example {width: 100%}
而不是：
.example {width: 700px}
也如上所述使用一些 CSS 媒体查询。
例如：
@media screen and (max-width: 700px) {
img {width: 200px}
}
这表示每当有人在屏幕小于 700 像素的设备上查看时，图像将为 200 像素。
希望对您有所帮助。
[编辑] 在移动设备上测试您的网站 -
1) 在Chrome.
中打开你要测试的网页2) 右击点击'Inspect'
3) 然后灰色的 window 应该会出现在浏览器的底部或右侧。
4) 在新的灰色window左上角会有两个按钮，点击"toggle device toolbar"
您现在可以 select 不同的设备并查看它们在每个设备中的显示方式。
div {
font-size: calc((.05em + 2vmin) + (.05em + 2vmax));
line-height: 115%;
}
这似乎行得通。 我在 Chrome 上使用 Inspect 的设备配置文件进行了测试。