响应式网站开发解决策略

最新推荐文章于 2026-03-31 11:44:46 发布

原创

最新推荐文章于 2026-03-31 11:44:46 发布 · 441 阅读

收录于

当前文章被以下社区和专栏收录：

本文探讨了响应式网站开发的几种策略，包括媒体查询@media的运用，详细讲解了不同设备尺寸下的样式加载。接着介绍了flex布局的优势及各属性，强调其在响应式设计中的重要性。此外，自适应布局的思路也被提及，通过JavaScript判断设备并重定向。最后，文章深入阐述了rem单位的使用，结合动态设置html的font-size，实现不同屏幕尺寸下的响应式效果。

简介：本文主要提供一些开发响应式网站的方式方法，希望对你有所帮助

一，使用媒体查询 @media

媒体查询可以根据不同的设备尺寸来加载不同的css样式，这样你就可以在一套html结构中开发出适应pc端和移动端的网站

@media的基本使用

<head>
  <style>
   /* 公共样式 */
    #box1 {
    
    
      width: 150px;
      height: 150px;
      border: 1px solid #eee;
    }
    /* 在 100px - 199px 设备屏幕宽度下加载,并覆盖调默认样式 */
    @media screen and (min-device-width: 100px) and (max-device-width: 199px) {
    
    
      #box1 {
    
    
        background-color: green;
      }
    }
  </style>
</head>
<body>
 <div id="box1"></div>
</body>