CSS_单位对比_响应式

 1.多列

           按照对应的列数进行布局，从左侧第一列向右侧第二列甚至更多进行布局

            1）划分列数

               column-count取值为纯数值

            2）调整列宽

                column-width：300px

                注意事项：默认的情况下列数是根据你的屏幕分配均匀的；

                如果你的列宽太宽的话会影响列数

                太小的话是不会影响列数的

            3）调整列间距

                 column-gap：50px

                 注意事项：一般情况下不建议你调整列的宽度的

                 原因：会丑

            4）列间隔线条

                column-rule：2px solid gray

                就类似于边框

            5）列的高度===列高度自适应

                column-fill：auto/balance

                auto====先让你的文本或者是内容撑满第一列然后再去撑第二列；第二列完成铺满之后，在撑第三列

                balance==均衡平分

            6）检索是否跨列

                column-span：none/all

                none===不跨列

                all====跨所有列

        2.响应式布局

            响应式含义：能根据屏幕的大小设备的大小，能更换不同的布局样式，这种情况被称之为相适应（适配）

            适配：能根据不同的屏幕大小更改布局内容区域

            响应式布局能实现的效果

              1）能拉伸--挤压

              2）能换行--平铺

              3）能显示--隐藏

              4）能补位置发生改变--上下--左右

              5）能删除--增加

              设计特点:

            优点 ：面对不同分辨率设备灵活性强

                 能够快捷解决多设备显示适应问题

                 能兼容所有的设备===优点

            缺点:

                 兼容各种设备工作量大，效率低下

                 代码累赘，会出现隐藏无用的元素,加载时间加长

                 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果

                一定程度 上改变了网站原有的布局结构，会出现用户混淆的情况

        3.实现响应式布局的方法

            媒体查询技术实现的：通过一些代码技术，去检测你的屏幕的宽度变化，根据你的屏幕宽度的变化来改变对应的布局效果

            关键代码关键语法

            @media screen and (min-width:300px)and(max-width:500px){

                div{

               

                }

            }

              如果你的屏幕的宽度满足对应的尺寸变化的话，执行{}里面对应的语句

              对应的布局发生变化，对应的颜色内容改变即可

              @meida========声明媒体查询的基本语法

              screen========检测的媒体类型==总共10多种，目前，你主要检测的就是屏幕

              and===========条件==检测屏幕的同时满足后面的条件表达项

             （）===========条件表达式

              {}============满足所有的条件的时候就去执行对应的{}里面的语句  不满足，不执行

              使用媒体查询技术实现对应的响应式

              先看对应的响应式布局

        4.响应式中的知识点：

            检测屏幕的时候，最小，最大值的，值有一个关键的名字：断点

            这些断点，是可以随缘更改的；有些断点需要让你注意

               1024=====pc

               768======ipad

               480======手机

               进行调整=====需要跟你的项目经理产品经理要求进行调整

            使用媒体查询的时候==检测咱们的横屏和竖屏===了解（）

            /* 竖屏 */

             @media screen and (orientation:portrait) and (max-width: 720px) {对应样式}

             /* 横屏 */

             @media screen and (orientation:landscape){对应样式}

             /* 打印样式 */

             @media print{}

             /* 手机等小屏幕手持设备 */

             @media screen and (min-width:320px) and (max-width:480px){}

             /* 平板之类的宽度 1024以下设备 */

             @media only screen and (min-width:321px) and (max-width:1024px){}

              /* PC客户端或大屏幕设备：1028px至更大 */

             @media only screen and (min-width:1029px){}

         

 

        5.布局中常见的单位

        实际开发的时候，经常使用的单位有哪些？

        px========像素单位（绝对单位）

        %=========百分比单位（会继承父元素的多少）

        em========相对单位，相对于自己本身的字体大小进行的调整缩小放大的倍数

             如果自己没有字体大小的设置，反而父元素有字体大小的设置的话，根据父元素的字体大小进行缩小放大的倍数===font-size：具有继承性

               1em=16px  10em=160px

        rem=======相对单位，相对于根目录（HTML）字体大小设置的一个缩小或者放大的一个倍数

             一个页面中只有一个根目录（html）html根目录默认的字体大小16px

        vw========视口的宽度

           vw======view-width

           100vw===一个完整的视口的宽度

        vh========视口的高度

            vh======view-height

            100vh==一个完整的视口的高度

            问题：10vw代表的是=====十分之一的视口的宽度

                  10vh代表的是=====十分之一的视口的高度

            问题：如何使用vw和vh实现一个正方形呢？

                  宽度和高度使用的高度得一致

            问题：设置视口的宽度：width：100vw 和 width：100%是否一样？

            如果没有纵向的滚动条的话，二者实现的效果是一致的

            如果有纵向的滚动条的话，则不一致

            100vw里面是包含滚动条的

            100%里面是不包含滚动条的

        6.单位之间的转换

          rem  px   vw

            1）已知：rem是根目录字体大小的缩小放大的倍数

              1rem=16px

            2）已知：100vw代表的是一个屏幕的视口的宽度

             iPhone4====    100vw=320px

             iPhone5====    100vw=320px

             iPhone678==    100vw=375px

             求东西：

             iPhone45

                100vw=320px

                ？vw=100px

                31.25vw=100px

             iPhone678

                100vw=375px

                ？vw=100px

                26.67vw=100px

          实际开发的时候移动端大部分使用的单位为rem单位

            1rem=16px

            iPhone4开发

              设计稿里面（ps）====测量结构====200px====物理像素

              物理像素=====CSS像素

              200/dpr(2)==100px(CSS)=====转换成rem单位100/16=6.25rem

              设计稿里面（ps）==物理像素===312px

              物理像素====CSS像素

              312px/dpr（2）=156px（CSS）===装换成rem单位156/16===9.75rem

              简单的方法=====考虑修改根目录字体大小：设置成10

              200px/dpr（2）===100px（CSS）===装换成rem100/10=10rem

              简化的方法=====考虑修改根目录字体大小为：50px

              200px/dpr（2）====100px（CSS）===装换成rem100/50=2rem

              200px/2/50=200/100=2rem

              最最最最最最最简化的方法使用的是flexble.js文件去做开发

        7.使用flexble.js做开发移动端布局开发

           1.建立页面

           2.引入公共的CSS文件

           3.引入自己的CSS文件

           4.引入icon图标的CSS文件

           5.引入的是js文件=====之后不需要在考虑任何视口的问题的

           建议你把原来的视口代码删除掉，冲突

           js文件里面已经把dpr，视口都已经封装进去了

           6.直接做布局

           HTML

           <header>头部</header>

           <section>主体</section>

           <footer>尾部</footer>

           CSS

           body{

               display:flex;

               flex-direction:column;

           }

           设置宽度高度如何设置=因为你已经把js文件引入只需要在你的测量基础之上/100

           测量的时候====320px=======3.2rem

           测量的时候====64px========0.64rem

            取消隐藏滚动条

            ::webkit-srcollbar{

              display:none;

            }

            border-radius  圆角  取值为边高度的一半