Question

我遇到有关屏幕尺寸的HTML和CSS问题。我知道如何使用两种语言进行编码，但最终我遇到了与屏幕自适应相同的问题。我在mac（27英寸屏幕）上完成了一个网站编码，在其他小屏幕尺寸上看起来很棒。

如果我不能在其他屏幕上工作，正确适应CSS配置，我做错了什么？

我不知道这个问题是否需要代码，如果是，我会立即上传。

非常感谢。

Answer 1

您需要了解基于液体设计或响应式设计你的目标是什么。

此链接可以帮助您了解有关液体设计的更多信息：http://www.sitepoint.com/liquid-design/

这与响应式设计有关：http://en.wikipedia.org/wiki/Responsive_web_design

这个其他链接是关于类似情况的stackoverflow问题讨论，你可以看看： How to deal with different screen resolutions in CSS?

Answer 2

我可能错了，但在codeacademy（我开始编码）他们说放大和缩小可以改变它的工作原理（但这可能只是因为他们如何编译）来重置缩放ctrl + 0 / cmd + 0

Answer 3

用户媒体查询以加载不同屏幕尺寸的单独样式

前： -

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
   content: "Email: ";
   font-style: italic;
   color: #666;
  }
}

css media queries and using available space

的详细信息

Answer 4

基本解决方案是Bootstrap.Go并抓住它，不用担心任何设计问题和屏幕问题，它会为你做的一切。

他们有很多css，组件，javascript内置在bootstrap中。

只需下载bootsrap包并享受.............

Answer 5

Media Queries是使用CSS获取自适应网页布局的最佳选择。

媒体查询：CSS媒体查询允许您根据显示内容的设备的查看大小和功能，对网站的设计应用更改。这是一个非常强大的工具，用于创建响应式设计，并且它已经获得了所有主要移动浏览器（包括Safari，Chromium，Opera，甚至即将推出的Internet Explorer Mobile [Windows Phone 7]）的支持。

以下是在设计样式表中使用媒体查询的简单示例：

#wrapper {
  width: 80%;
  margin: auto;
  max-width: 1200px;
  min-width: 800px;
}
@media screen and (max-width: 800px) {
  #wrapper {
    width: 90%;
    min-width: 0;
  }
}

Click here to learn: How to use media-query

List of Media Queries for Standard Devices

对于不同屏幕尺寸的CSS编辑缺乏经验？

5 个答案: