移动web基础

 1、meta  这个 视口  viewport

            width            宽度

            initial-scale    初始的缩放比

            maximum-scale    最大的缩放比

            minimum-scale    最小缩放比

            user-scalable    是否允许用户缩放  yes 和 no

    例如：  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,user-scalable=no">

 

            禁止 缩放   看情况   写代码的时候 最大 和 最小是可以不写的

            meta里边标准的写法    五个属性必须都有

 

          

 

        2、背景的缩放：  background-size 

 

            具体的值 100px⭐  一般来说给一个值 是代表宽度   高度是等比例缩放的

            百分比 ： 一个值的时候  还是宽度   两个值的时候 前代表宽  后代表高

            cover： 覆盖的意思   --   这个盒子 就不会出现空白的区域 

            

                1、图片比盒子小的时候  -- 图会放大  会充满整个盒子

                2、图片比盒子大的时候  -- 图片不一定会完全显示出来    左上角部分开始显示

            

            contain也会进行一个 填充   最大那个值 进行填充大的   就有空白的部分了

 

        3、页面布局：  

        

        百分比布局  --- 太low了 ---  流式布局 ---  就是100%

 

                    圣杯布局 --- overflow:hidden ⭐

 

                    盒子的宽度 不给具体的像素值  然后用 %多少来代替

                    子盒子的宽度 要跟父盒子的 一样   width:100%

                    一行显示三个盒子  并且占满这一行  width:33.33%

 

        1、flex布局 ---  有点low   ---  弹性布局

 

            首先要确定谁是flex布局的源头  ---  定义flex布局

 

            让谁在一行显示 多个  ---  或者 让那些盒子 用flex布局的效果

 

            给父盒子 一个display:flex;   然后子盒子 就具备了 flex布局

 

            父盒子常见的属性 ： 

 

                设置主轴的方向 ：flex-direction

                设置子元素在主轴方向上的排列方式的：justify-content

                设置子元素是否换行：flex-wrap

                设置子元素在侧轴上的排列方式单行：align-items

                设置子元素在侧轴上的排列方式多行：align-content

                复合属性：flex-flow  包括了主轴的方向  以及是否换行     了解一下

 

                flex-direction : row水平方向--由左到右/column垂直方向 由上到下    

                                row-reverse水平方向   由右到左   column-reverse垂直方向  由下到上

 

                justify-content : flex-start 默认值  从左到右排列  默认的  了解

                                  flex-end     从右到左排列       了解

                                  center      在主轴方向居中对齐

                                  space-around  平分剩余的空间

                                  space-between 先两边对齐  然后再平分剩余的空间

 

                flex-wrap:    默认nowrap  不换行     wrap换行

 

                align-items:  flex-start/   flex-end  /  center  / stretch 拉伸  高度  填充了高度

 

                align-content : flex-start  /  flex-end / center /space-around /space-between / stretch

 

            子盒子的属性： flex子元素的大小的  /  order 子元素的顺序 / align-self 侧轴的

 

       2、 rem + 媒体查询 +less     ---  rem布局

 

           3、 cssrem    ++    px2rem

 

            媒体查询   @media screen  and (max-width:500px){  写的是满足条件的时候 显示的css样式  }

 

            less  声明变量 @          &表示  外层的元素    div{   &::before  }