html - 使静态页面响应

标签 html css responsive

我是网页设计的初学者,我使用 html 和 css 开发了一个页面。我想将我的静态页面转换为响应式,以便每当我重新调整浏览器大小时,我的页面样式都会根据窗口大小保持不变。 下面是我的 body 宽度和高度。

body{
    width:100%;
    height:100%;
    margin:0%;
    background-color:white;
}

现在,每当我尝试重新调整浏览器窗口的大小时,我的页面样式就不会保持不变。div 会相互折叠。

请给我一些简单的提示,以将我的页面转换为响应式。

最佳答案

  body {
            background-color: lightpink;
         }
         @media screen and (max-width: 420px) {
            body {
               background-color: lightblue;
            }
         }
  <body>
      <p>If screen size is less than 420px, then it will show lightblue color, or else it will show   light pink color</p>
   </body>
 

关于html - 使静态页面响应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36193674/

相关文章:

javascript - 捕获加载页面完成的 HTTP 请求

html - Logo 未出现在页眉中

javascript - 如何将幻灯片应用于向上或向下移动的元素

html - 为属于 span 标签的不同类设置样式

html - 中心响应图像

html - 将两个文本框和一个搜索按钮右对齐并排成一行

javascript - 我们可以在单个元素中使用多个 ng-style 对象吗?

html - 在父 div 内对 Angular 排列 2 个 div

html - 我应该让网页响应到哪个设备宽度大小?

html - 如何测试 srcset 算法