Question

我想将我的网站调整为不同的屏幕分辨率。我已经设置了这样的CSS，但它不起作用：

body {
    background: #317070;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1;
    margin : 0;
    padding: 0;
    width:100%;
    height:100%;
}

我该怎么办？ RQ：我已查看此链接：http://css-tricks.com/resolution-specific-stylesheets/

修改

我也有

html {
    margin:0;
        padding:0;
    width:100%;
    height:100%;
}

Answer 1

您可以使用overflow：none阻止滚动;但在这种情况下，你只需完全隐藏一些文本。你的目标是什么 - 根据分辨率改变文本或什么？对于较小的屏幕，垂直滚动非常正常。

Answer 2

你的问题有点受限，所以这就是我来的

body,html {
  margin:0;
  padding:0;
  height:100%;
  width:100%;
  font-size:16px;
}
/* max-width of an image is 100% width, images will shrink at a smaller screen */
img { 
  max-width:100%; 
}
/* for example, smaller font-size at a lower resolution of smaller then 480px */
@media screen and (max-width:480px) {
  body { font-size: 0.8em; }
}

对于移动屏幕，您可以查看视口：Viewport meta tag

所有屏幕尺寸分辨率的网站

2 个答案: