11 响应式布局、渐变

1.1  响应式布局

• 一个项中有多种布局方案，会根据设备的大小显示出不同的布局

• 响应式的关键点：要知道设备什么时候发生改变

• 媒体查询就能检测设备的大小

• 媒体查询的语法

  • @media 你要检测的设备类型 关键字 (条件){ 满足该条件执行的语句 }

  • min-width：大于等于

  • max-width：小于等于

• /* 横屏 */ @media all and (orientation:landscape){ body{ background-color: red; } } /* 竖屏 */ @media all and (orientation:portrait){ body{ background-color: green; } }

1.2  渐变

• 线性

  • 从一个方向变到另一个方向

  • background-image：linear-gradient(方向,颜色1，颜色2。。。)

  • 如果加了浏览器的前缀，方向词不能写to，写的起点

  • 如果不加前缀，方向词需要些to。写的是终点

  • 写方向的时候

    • 用方向词书写

    • 用角度写，角度单位是deg

  • 重复渐变

    • 在渐变单词之前写repeating

    • 在颜色的后面写百分比

• 径向

  • 从一个点想四周扩散

  • background-image：radial-gradient(起点,颜色1，颜色2。。。)

  • 写了起点就要带前缀

  • 不写起点，默认是中心点，可以不带前缀

  • 写起点的时候

    • 可以用方向词写

    • 写坐标点

  • 重复渐变

    • 在渐变单词之前写repeating

    • 在颜色的后面写百分比

  • 形状

    • 正方形：默认圆形,只能呈现出圆形

    • 长方形：默认椭圆形，可以更改成圆形

    • 通过下面2个单词可以更改渐变的形状，写在颜色词前面即可

    • circle=====圆

    • ellipse====椭圆

  • 大小

    • closest-side:最近边

    • farthest-side:最远边

    • closest-corner:最近⻆

    • farthest-corner：最远⻆，默认值

1.3  浏览器的内核与前缀

• 谷歌chrome==》内核webkit==》前缀-webkit-

• 火狐firefox==》内核gecko===》前缀-moz-

• 苹果safari===》内核webkit==>前缀-webkit-

• 欧鹏opera==》内核blink==》前缀-o-

• IE===》内核trident==》前缀-ms-

• edge==》内核webkit==》前缀-webkit-

1.4  隐藏滚动条

::-webkit-scrollbar{

                          display:none

                           }