问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

html/css 以适应所有屏幕分辨率

社区维基
1
新手上路，请多包涵

我在网站上工作，我试图让它响应所有决议但没有成功..

 body {
  width:1920px;
  background-color: #f8e0b3;
  height:1080px;
}

div.container {
  width:100%;
    height:100%;
}

div.header {
    background:url(img/header.jpg);
    width:100%;
    height:46%;
  margin-top:;
  margin-left:;
  border-bottom: 2px solid black;
}

h1.naslov {
  font-size:60px;
  color:white;
  margin:0 auto;
  margin-left:28%;
  font-family: Aramis;
}

p.naslov-text {
    font-size:40px;
    color:#634ea9;
    margin:0 auto;
    width:1000px;
    margin-top:0%;
    margin-left:36%;
    font-family: Aramis;
}

 <body>
  <div class = "container">
    <div class = "header">
      <h1 class = " naslov "> Lorem ipsum nasov je? </h1>
        <p class = "naslov-text">
            "Lorem ipsum dolor sit amet, consectetur adipisicing elit."
        </p>
     </div>
  </div>
</body>

当我调整大小时，我的浏览器网站不会调整大小。我整个上午都在努力，我真的精疲力竭了。有谁知道使用什么逻辑来使它适合所有屏幕，但只使用 css。

原文由 user3477366 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译htmlcssresolution
阅读 640
1 个回答
得票最新
社区维基
1

当你给你的 body 和 p.naslov-text 一个固定的宽度时，你的网站将不会调整大小。删除所有 px 大小并用百分比值替换它们。

但是，如果您想要固定大小并且响应迅速，则必须像这样使用 css 媒体查询：

 body
{
    width:1920px;
    background-color: #f8e0b3;
    height:1080px;
}

@media screen and (min-width: 500px) {
   body {
      width:420px;
   }
}

@media screen and (min-width: 800px) {
   body {
      width:720px;
   }
}

原文由 Cem Özer 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题
logo
Stack Overflow 翻译
子站问答
访问
宣传栏