2019-07-09

做vivo官网的收获

1、碰到一个需要把四张图片放在一列显示，用了flex布局但是发现图片太大，在伸缩容器中放不下，主要部分没有显示出来，这时就需要和以前居中显示一样，通过子绝父相定位。

2、定位之后出现的很多问题往往与z-index有关。

3、遇见好几次text-align不管用，因为没有设置宽。

4、媒体查询：获取当前浏览器宽度，设置不同的样式。

• 媒体查询不适合复杂的网页

• 外联格式

  • <link rel="stylesheet" href="媒体查询CSS/index-pc.css" 
          media="screen and (min-width: 1200px)">
    
    

  • 即引入的时候写上media就行，企业开发用这种,但是为了避免代码冗余，引入电脑样式的时候不会规定大小，只给平板和手机加条件覆盖不同的样式即可。==（想想）==

  • 在企业开发中, 如果需要分别给电脑/平板/手机分别设置样式, 那么我们会将电脑的样式写在前面, 平板的样式写在电脑的后面, 手机的样式写在平板的后面

  • 在企业开发中媒体查询中指定的宽度不是固定的, 指定的宽度是根据自己企业的需求来指定的, 并没有一个固定的值代表电脑的, 也没有一个固定的值代表平板的, 也没有一个固定的值代表手机的

  • 编写响应式网页步骤

    • 编写电脑
    • 编写平板，相同的选择器覆盖不同的样式
    • 编写手机，相同的选择器覆盖不同的样式

• 内联格式@media 条件{}

  • 如果当前的网页是显示在电脑or平板or手机上的(screen的含义), 并且当前浏览器的宽度是大于等于1200px的, 那么就执行后面大括号中的代码

    • @media screen and (min-width: 1200px){
                  div{
                      width: 500px;
                      height: 500px;
                      background: red;
                  }
              }
      
      

  • 如果当前的网页是显示在电脑or平板or手机上的, 并且当前浏览器的宽度是小于等于1199px的, 那么就执行后面大括号中的代码

  • @media screen and (max-width:1199px){
                div{
                    width: 300px;
                    height: 300px;
                    background: green;
                }
        }
    

5 理解一下官网的最下边内容由原来的浮动带来的影响，以及解决办法