web怎么实现响应式网页布局

做完的样式如下：

• 编写网页使用编程工具Visual Studio Code，国外软件推荐使用必应搜索(英文版)。

• 接下来加样式：标签之间加样式。

  加了style后的效果

• 注意.container里面的描述height: 100vh; (高度百分百)、.header和.footer 里面的描述height:20vh;(高度20%)。写网页最好写成百分比，不要写成绝对值。写绝对值无法缩放，写成百分比时放大缩小页面会自动缩放调整。

• 媒体查询，即判断显示设备，目前窄屏优先(适配手机)已完成，然后编写代码判断是否宽屏，编写宽屏优先(适配PC)的代码。

  @media screen and (min-width:400px) {
  
              .main {
                  flex-direction: row;
              }
  
              .main .nav,
              .main .aside {
                  flex: 0 0 20vw;
              }
  
          }

  min-width:400px 表示当屏幕宽度比大于等于400px时，切换布局方式。(老师开始设576，此时经常不会切换到宽屏模式，触发条件数字偏大)

以上是flex box布局模式。

二、Bootstrap栅格布局

推特出品的前端模板，老师推荐用bing国际版查官网https://getbootstrap.com/，在官网查资料。

(视频资料显示官网bootstrap版本是4.1.3，推断该视频是2年前出的)

• 实践案例：

• 从bootstrap找到card模板：

• 在head中导入bootstrap的链接

• card复制2份，最终完整代码

  
  
  
  
      
      
      
      
  
  
  
  
      
          
          
              Card title
              Some quick example text to build on the card title and make up the bulk of the card's
                  content.
  
              Go somewhere
          
      
  
      
          
          
              Card title
              Some quick example text to build on the card title and make up the bulk of the card's
                  content.
  
              Go somewhere
          
      
  
      
          
          
              Card title
              Some quick example text to build on the card title and make up the bulk of the card's
                  content.
  
              Go somewhere
          
      
  
  
  
  

• card效果1，直接复制后card是纵向排列成3个。

• 加了container会有留白和间距。(网页设计一大重要技巧是合适的留白，整齐的留白和间距。)

  container下面一行写明布局是"row"，现在卡片是横向排列了。注意：bootstrap布局优先考虑的是手机优先。

• 再调整style

  marin-top指的是上边距，marin-left指的是左边距，marin-right指的是右边距，marin-bottom指的是下边距。

  1em指的是当前字体大小的一个字符高或宽。15px是指15个像素。

  自定义了.mycard，指定右边和下边空一个字符间距。

• 给下方的3个card 添加 mycard约束。

• 注意画面的层次感，背景不要用全白，例如京东很多页面背景是灰色。

  在body中添加background-color:#f4f4f4，不要使用gray，使用gray颜色太暗，#f4f4f4白中带灰做背景恰好。

• 然后修改card头部显示的图片，从必应上搜索免费图片，将其连接加入src=""的双引号中间。

• 调整整体边距、卡片边距、card宽度为14rem。

  最终代码：

  最终效果：

使用模板的优点是自动适应不同设备不同分辨率，当屏幕宽度大时可以一行显示3个card，屏幕小一些一行自动调整为显示2个card，屏幕再变窄时会自动调整为一行显示1个card。

“web怎么实现响应式网页布局”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！

• 建站热线：13518219792
• 
  微信扫一扫在线咨询
• QQ客服：
• 案 例
• 价 格