CSS教程： CSS（高级）

时间  2020-04-05
标签 css 教程 高级 栏目 CSS 繁體版
原文   原文链接

CSS（高级）javascript

CSS 动画

Transform（变换）

2D 转换

CSS3 2D转换，咱们能够斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)元素。
注意： Internet Explorer 10, Firefox, 和 Opera支持transform 属性。Chrome 和 Safari 要求前缀 -webkit- 版本。 Internet Explorer 9 要求前缀 -ms- 版本.
经常使用 2D 变换方法：css

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

translate()

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动html

.translate {
    transform: translate(50px, 100px);
    -ms-transform: translate(50px, 100px); /* IE 9 */
    -webkit-transform: translate(50px, 100px); /* Safari and Chrome */
}

rotate()

rotate()方法，在一个给定度数沿着元素中心顺时针旋转的元素。负值是容许的，这样是元素逆时针旋转。java

.rotate
{
    transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
}

scale()

scale()方法，该元素增长或减小的大小，取决于宽度（X轴）和高度（Y轴）的参数：jquery

.scale
{
    transform: scale(2,4);
    -ms-transform: scale(2,4); /* IE 9 */
    -webkit-transform: scale(2,4); /* Safari and Chrome */
}

skew()

skew()方法，该元素会根据横向（X轴）和垂直（Y轴）线参数给定角度：css3

.skew
{
    transform:skew(30deg,20deg);
    -ms-transform:skew(30deg,20deg); /* IE 9 */
    -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
}

以上几种方法都有其各自的利弊，在实际应用中建议使用第一种和第四种，由于这两种方法是在项目制做中是经常使用的方法，对于他们的具体区别skewX(30deg) 以下图：

skewY(10deg) 以下图：
#
skew(30deg, 10deg) 以下图：

git

matrix()

matrix()方法和2D变换方法合并成一个。
matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。github

.matrix
{
    transform:matrix(0.866,0.5,-0.5,0.866,0,0);
    -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
}

源码

https://gitee.com/turingitclub/css-learning/blob/dev/base/2d_transform.html
web

3D 转换

CSS3 3D Transform,用于 3 维动画或旋转。
CSS3 3D 转换是一个属性,用于改变元素的实际形式。这个特性能够改变元素的形状、大小和位置。
主要有下列方法：算法

  • rotateX()
  • rotateY()
  • rotateZ()

注意：Internet Explorer 10 和 Firefox 支持 3D 转换； Chrome 和 Safari 必须添加前缀 -webkit-； Opera 还不支持 3D 转换(支持 2D 转换 )
otateX()
rotateX()方法，围绕其在一个给定度数X轴旋转的元素。

.rotate-x {
    transform: rotateX(60deg);
    -webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

rotateY()

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素。

.rotate-y {
    transform: rotateY(60deg);
    -webkit-transform: rotateY(120deg); /* Safari and Chrome */
}

rotateZ()

rotateZ()方法，围绕其在一个给定度数Z轴旋转的元素。

.rotate-z {
    transform: rotateZ(60deg);
    -webkit-transform: rotateY(120deg); /* Safari and Chrome */
}

rotate3d()

otate3d(x,y,z,a)中取值说明：

  • x：是一个0到１之间的数值，主要用来描述元素围绕X轴旋转的矢量值；
  • y：是一个０到１之间的数值，主要用来描述元素围绕Y轴旋转的矢量值；
  • z：是一个０到１之间的数值，主要用来描述元素围绕Z轴旋转的矢量值；
  • a：是一个角度值，主要用来指定元素在3D空间旋转的角度，若是其值为正值，元素顺时针旋转，反之元素逆时针旋转。 面介绍的三个旋转函数功能等同：
  • rotateX(a)函数功能等同于rotate3d(1,0,0,a)
  • rotateY(a)函数功能等同于rotate3d(0,1,0,a)
  • rotateZ(a)函数功能等同于rotate3d(0,0,1,a)

例子

.rotate-3d {
    transform: rotate3d(0,0.6,0.2,60deg);
    -webkit-transform: rotate3d(0.6,0.6,0.2,60deg); /* Safari and Chrome */
}

转换方法

函数 描述
matrix3d(_n_,_n_,_n_,_n_,_n_,_n_,
_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_,_n_)		 定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(_x_,_y_,_z_) 定义 3D 转化。
translateX(_x_) 定义 3D 转化，仅使用用于 X 轴的值。
translateY(_y_) 定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(_z_) 定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(_x_,_y_,_z_) 定义 3D 缩放转换。
scaleX(_x_) 定义 3D 缩放转换，经过给定一个 X 轴的值。
scaleY(_y_) 定义 3D 缩放转换，经过给定一个 Y 轴的值。
scaleZ(_z_) 定义 3D 缩放转换，经过给定一个 Z 轴的值。
rotate3d(_x_,_y_,_z_,_angle_) 定义 3D 旋转。
rotateX(_angle_) 定义沿 X 轴的 3D 旋转。
rotateY(_angle_) 定义沿 Y 轴的 3D 旋转。
rotateZ(_angle_) 定义沿 Z 轴的 3D 旋转。
perspective(_n_) 定义 3D 转换元素的透视视图。

源码

https://gitee.com/turingitclub/css-learning/blob/dev/base/3d_transform.html

[Transition（过渡）]()

CSS3 过渡是元素从一种样式逐渐改变为另外一种的效果。

transitionComparition.gif
https://codepen.io/AlexZ33/pen/KKwXLea

尽管 CSS3 过渡效果是足够的过渡的一个元素,可是 text-transform 属性能够提升 CSS3 过渡效果的风格。
主要有四个属性的CSS3转换效果,已被描述以下:

注意：Internet Explorer 10, Firefox, Opera, Chrome, 和Opera 支持transition 属性。Safari 须要前缀 -webkit-。Internet Explorer 9 以及更早的版本，不支持 transition 属性。Chrome 25 以及更早的版本，须要前缀 -webkit-

transition-property

规定应用过渡的 CSS 属性的名称。

transition-property: all;
transition-property: none;
transition-property: background-color;
transition-property: background-color, height, width;

transition-duration

定义过渡效果花费的时间。默认是 0。 时间单位能够是秒/毫秒。

transition-duration: 2s;
transition-duration: 1000ms;
transition-duration: 1000ms, 2000ms;

transition-timing-function

规定过渡效果的时间曲线。默认是 "ease"。

transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-in-out;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(1.000, 0.835, 0.000, 0.945);

其中：

  • linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  • ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  • ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  • ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
  • ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  • step-start：等同于 steps(1, start)
  • step-end：等同于 steps(1, end)
  • steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值能够是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。
  • cubic-bezier(<number>, <number>, <number>, <number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

https://codepen.io/AlexZ33/pen/KKwvWjg

注意，emmet语法。 我要生成下面的html结构，用的  div#wrapper>(p+div.progress-bar#bar$)*9  再按Tab键

image.png

transition-delay

规定过渡效果什么时候开始。默认是 0。

transition-delay: 2s;
transition-delay: 1000ms, 2000ms;
transition-delay: -2s;

https://codepen.io/AlexZ33/pen/eYmBYmW

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>过渡效果 | AlexZ33</title>
    <meta name="description" content="过渡效果">
    <meta name="author" content="AlexZ33"/>
    <meta name="viewport" content="width=device-width">
    <link rel="shortcut icon" href="/favicon.ico">

    <style>
        .example {
            width: 100px;
            height: 100px;
            background: red;
            transition-property: width;
            transition-duration: 1s;
            transition-timing-function: linear;
            transition-delay: 2s;
            /* Safari */
            -webkit-transition-property: width;
            -webkit-transition-duration: 1s;
            -webkit-transition-timing-function: linear;
            -webkit-transition-delay: 2s;
        }
        .example:hover {
            width: 200px;
        }
        #example {
            position: relative;
            width: 530px;
            height: 530px;
            margin: 0 auto 10px;
            padding: 10px;
        }
        .childbox {
            font-size: 12px;
            position: relative;
            width: 60px;
            height: 60px;
            margin-bottom: 10px;
            background-color: #ccc;
        }
        .childbox p {
            text-align: center;
            padding-top: 10px;
        }
        #ease.childbox {
            -webkit-transition: all 4s ease;
            -moz-transition: all 4s ease;
            -o-transition: all 4s ease;
            transition: all 4s ease;
            border: 1px solid #ff0000;
        }
        #ease_in.childbox {
            -webkit-transition: all 4s ease-in;
            -moz-transition: all 4s ease-in;
            -o-transition: all 4s ease-in;
            transition: all 4s ease-in;
            border: 1px solid #00ffff;
        }
        #ease_out.childbox {
            -webkit-transition: all 4s ease-out;
            -moz-transition: all 4s ease-out;
            -o-transition: all 4s ease-out;
            transition: all 4s ease-out;
            border: 1px solid #f5f5f5;
        }
        #ease_in_out.childbox {
            -webkit-transition: all 4s ease-in-out;
            -moz-transition: all 4s ease-in-out;
            -o-transition: all 4s ease-in-out;
            transition: all 4s ease-in-out;
            border: 1px solid #f209f3;
        }
        #linear.childbox {
            -webkit-transition: all 4s linear;
            -moz-transition: all 4s linear;
            -o-transition: all 4s linear;
            transition: all 4s linear;
            border: 1px solid #ddddff;
        }
        #custom.childbox {
            -webkit-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            -moz-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            -o-transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            transition: all 4s cubic-bezier(1.000, 0.835, 0.000, 0.945);
            border: 1px solid #cfdf44;
        }
        #negative.childbox {
            -webkit-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            -moz-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            -o-transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            transition: all 4s cubic-bezier(1.000, -0.530, 0.405, 1.425);
            border: 1px solid #000;
        }
        #steps-start.childbox {
            -webkit-transition: all 4s steps(4, start);
            -moz-transition: all 4s steps(4, start);
            -o-transition: all 4s steps(4, start);
            transition: all 4s steps(4, start);
            border: 1px solid #ff0;
        }
        #steps-end.childbox {
            -webkit-transition: all 4s steps(4, end);
            -moz-transition: all 4s steps(4, end);
            -o-transition: all 4s steps(4, end);
            transition: all 4s steps(4, end);
            border: 1px solid #0f0;
        }
        #example:hover .childbox, #example.hover_effect .childbox {
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            -webkit-transform: rotate(720deg);
            -moz-transform: rotate(720deg);
            -o-transform: rotate(720deg);
            -ms-transform: rotate(720deg);
            transform: rotate(720deg);
            margin-left: 420px;
            background-color: #fff;
        }
    </style>

</head>
<body>
<p>鼠标移动到 div 元素上，查看过渡效果。</p>

<p><b>注意：</b> 过渡效果须要等待两秒后才开始。</p>

<div class="example"></div>

<p>Hover on object to see it in action</p>

<div id="example">
    <div id="ease" class="childbox"><p>CSS3</p></div>
    <div id="ease_in" class="childbox"><p>CSS3</p></div>
    <div id="ease_out" class="childbox"><p>CSS3</p></div>
    <div id="ease_in_out" class="childbox"><p>CSS3</p></div>
    <div id="linear" class="childbox"><p>CSS3</p></div>
    <div id="custom" class="childbox"><p>CSS3</p></div>
    <div id="negative" class="childbox"><p>CSS3</p></div>
    <div id="steps-start" class="childbox"><p>CSS3</p></div>
    <div id="steps-end" class="childbox"><p>CSS3</p></div>
</div>

</body>
</html>

CSS 3D  transition

https://codepen.io/AlexZ33/pen/VwYMOBR

[Animation（动画）]()

CSS3，咱们能够建立动画，它能够取代许多网页动画图像，Flash 动画，和 Javascripts。

CSS3 @keyframes 规则

要建立CSS3动画，你将不得不了解@keyframes规则。
@keyframes规则是用来建立动画。 @keyframes规则内指定一个 CSS样式和动画将逐步从目前的样式更改成新的样式。
注意：Internet Explorer 十、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。 Chrome 和 Safari 须要前缀 -webkit-。

CSS3 动画

当在@keyframe建立动画，把它绑定到一个选择器，不然动画不会有任何效果。
指定至少这两个 CSS3 的动画属性绑定向一个选择器：

  • 规定动画的名称
  • 规定动画的时长

例子：

#animated_div {
    animation: animated_div 5s infinite;
    -moz-animation: animated_div 5s infinite;
    -webkit-animation: animated_div 5s infinite;
}

CSS3动画是什么？

  • 动画是使元素从一种样式逐渐变化为另外一种样式的效果。
  • 您能够改变任意多的样式任意多的次数。
  • 请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
  • 0% 是动画的开始，100% 是动画的完成。
  • 为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

例子：

@keyframes animated_div {
    0% {
        left: 0px;
    }
    20% {
        left: 50px;
        background-color: green;
    }
    40% {
        left: 140px;
        background-color: red;
    }
    60% {
        left: 280px;
        background-color: yellow;
    }
    80% {
        left: 425px;
        background-color: blue;
    }
    100% {
        left: 0px;
        background-color: pink;
    }
}

经常使用属性

属性 描述 CSS Demo
@keyframes 规定动画。 3
animation 全部动画属性的简写属性，除了 animation-play-state 属性。 3
animation-name 规定 @keyframes 动画的名称。 3
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 单位s或ms 3
animation-timing-function 规定动画的速度曲线。默认是 "ease"。
其余还有：
- linear
- ease-in
- ease-out
- ease-in-out
- step-start
- step-end
- steps(int, start/end)
- cubic-bezier(n,n,n,n): 三次贝塞尔
 3
animation-delay 规定动画什么时候开始。默认是 0。 3 negative-animation-delay

负值 animation-delay —— 进阶
animation-iteration-count 规定动画被播放的次数。默认是 1。 3
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3

源码

示例01：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation.html

示例02：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_2.html

示例03  running hourse：

https://gitee.com/turingitclub/css-learning/blob/dev/base/animation_3.html

steps(int, start|end) 算是 step-start 和 step-end 的进化型, 

  • step 等同于 steps(1, start) 
  • step-end 等同于 steps(1, end) 

由于只走了 一步  ，若是咱们把int步数增长，就会看到每一个关键影格之间多了一些演算出来的影格，固然若是步数设定越多，看到的动画也会越流畅。 （但须要这样，不用step就行了）
好比： 若是把上面的 step-start 改为 steps(3, start) , step-end 改为 steps(3,end) 会获得下面的结果
https://codepen.io/AlexZ33/pen/PowpKLb

若是熟练 steps 的用法，就可以很简单的使用 sprite 图片来作动画，什麽是 sprite 图片 呢？就是将许多图案集合成一张图，接著透过 CSS 的语法使这些图案分别呈如今网页裡，这样就能大幅减小多张图片载入的 request 数量。


上图是一张经典的 sprite 图片 ( Leland Stanford 所拍摄 )，只要透过 CSS 动画的 steps，咱们也能很简单的让图片中的马儿跑起来。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>css动画 示例3 running hourse | https://alexz33.github.io/</title>
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    div {
      display: block;
    }


    #hourse {
      width: 186px;
      height: 141px;
      position: absolute;
      background-image: url("image/hourse.jpg");
      animation-name: run;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: step-start;
    }

    @keyframes run {
      0% {
        background-position: -15px -13px;
      }

      6.25% {
        background-position: -210px -13px;
      }

      12.5% {
        background-position: -403px -13px;
      }

      18.75% {
        background-position: -592px -13px;
      }

      25% {
        background-position: -15px -165px;
      }

      31.25% {
        background-position: -210px -165px;
      }

      37.5% {
        background-position: -403px -165px;
      }

      43.75% {
        background-position: -592px -165px;
      }

      50% {
        background-position: -15px -320px;
      }

      56.25% {
        background-position: -210px -320px;
      }

      62.5% {
        background-position: -403px -320px;
      }

      68.75% {
        background-position: -592px -320px;
      }

      75% {
        background-position: -15px -470px;
      }

      81.25% {
        background-position: -210px -470px;
      }

      87.5% {
        background-position: -403px -470px;
      }

      93.75% {
        background-position: -592px -470px;
      }

      100% {
        background-position: -592px -470px;
      }
    }
  </style>
</head>

<body>
  <div id="hourse">
  </div>
</body>

</html>


示例04： marriage-proposal：

僵尸行走

  • 注意： 与 running house 动画的区别， 用js （jquery）的animate函数来作帧动画的控制

zoobie.gif

源码： https://gitee.com/turingitclub/css-learning/tree/dev/task04/zoombieWalking

酷炫3D动画 （旋转的正方体）

源码： https://codepen.io/AlexZ33/pen/yLyzWwo

炫酷页面开发（轮播图）

酷炫页面开发（3D 视频展现区）

transform3D.gif
代码 ： https://codepen.io/AlexZ33/pen/zYxNVzw

css-only-dropdown-menu

dropmenu.gif

源码 ： https://gitee.com/turingitclub/css-learning/blob/dev/task04/css-only-dropdown/index.html

CSS-only-tooltip

image.png

源码  ： https://gitee.com/turingitclub/css-learning/blob/dev/task04/CSS-only-Tooltip/index.html

漂亮ToolTips效果

CSS响应式设计

Viewport

什么是 Viewport?

viewport 是用户网页的可视区域。
viewport 翻译为中文能够叫作"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，一般这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每一个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户能够经过平移和缩放来看网页的不一样部分。

设置 Viewport

一个经常使用的针对移动网页优化过的页面的 viewport meta 标签大体以下：

  • width：控制 viewport 的大小，能够指定的一个值，若是 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
  • height：和 width 相对应，指定高度。
  • initial-scale：初始缩放比例，也便是当页面第一次 load 的时候缩放比例。
  • maximum-scale：容许用户缩放到的最大比例。
  • minimum-scale：容许用户缩放到的最小比例。
  • user-scalable：用户是否能够手动缩放。

如下实例演示了使用viewport和没使用viewport在移动端上的效果：

实例一、没有添加 viewport：点击查看

image.png
image.png
代码：https://gitee.com/turingitclub/css-learning/blob/dev/base/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/example_withoutviewpoint.html 

实例二、添加 viewport：点击查看
image.png

若是你在平板电脑或手机上访问，能够直接点击查看效果。

代码：https://gitee.com/turingitclub/css-learning/blob/dev/base/%E5%93%8D%E5%BA%94%E5%BC%8F%E8%AE%BE%E8%AE%A1/example_withviewpoint.html
不一样的地方在这里： 
image.png 

viewport视口

布局视口(layout viewport)
可视视口(visual viewport) //用户的缩放能够改变可视视口
理想视口(ideal viewport) //指布局视口在一个设备上的最佳尺寸
理想视口是为构建手机浏览器优化的页面而添加的 
<meta name="viewport" content="width=device-width"/>

上面这句告诉设备要使用理想视口 ，理想视口的宽度做为布局视口的宽度（width定义布局视口的宽度 若是不指定  布局视口的宽度就是厂商的默认值）

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

最小缩放比例  最大缩放比例都为1  禁用了用户缩放

Media Query（媒体查询)

媒体(media)查询在W3CH CSS3 上有介绍：CSS3 @media 查询。
使用 @media 查询，你能够针对不一样的媒体类型定义不一样的样式。
基础能够戳Ｗ3CH教程　响应式 Web 设计 – 媒体查询

下面咱们对教程未详细提到的内容作个补充

Media Type

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media()的语句中包含的内容：
一、screen：这个不用说你们都知道，指的是一种媒体类型  -->  详情戳MDN文档；
二、and：被称为关键词，与其类似的还有not,only，稍后会介绍；
三、（max-width:600px）：这个就是媒体特性，说得通俗一点就是媒体条件。
前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和 媒体特性(Media Query)

@media all and (min-width:800px) and (origentation:landscape) {
  ...  
}

all 能够是 screen ,print.这是媒体类型能够经过媒体类型对不一样的设备指定不一样的样式，在css2中咱们常碰到的就是all（所有）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。

页面中引入媒体类型方法也有多种：

一、link方法引入

<link rel="stylesheet" type="text/css" href="../css/print.css" media="print" />

二、xml方式引入

<?xml-stylesheet rel="stylesheet" media="screen" href="css/style.css" ？>

三、@import方式引入

@import引入有两种方式，一种是在样式文件中经过@import调用别一个样式文件；另外一种方法是在>/head>中的中引入，单这种使用方法在ie6-7都不被支持 如
样式文件中调用另外一个样式文件：

@import url("css/reset.css") screen;
@import url("css/print.css") print;

在>/head>中的中调用：以上几种方法都有其各自的利弊，在实际应用中建议使用第一种和第四种，由于这两下面咱们对教程未详细提到的内容作个补充

<head>
 <style type="text/css">
 @import url("css/style.css") all;
 </style>
 </head>

四、@media引入
这种引入方式和@import是同样的，也有两种方式：
样式文件中使用：

@media screen{
     选择器{
            
        属性：属性值；
     }
   }

在>/head>中的中调用：

<head>
    <style type="text/css">
 @media screen{
           选择器{
      属性：属性值；
    }
 }
    </style>
  </head>

以上几种方法都有其各自的利弊，在实际应用中建议使用第一种和第四种，由于这两下面咱们对教程未详细提到的内容作个补充种方法是在项目制做中是经常使用的方法，对于他们的具体区别

Media Query

前面有简单的提到，Media Query是CSS3 对Media Type的加强版，其实能够将Media Query当作Media Type(判断条件)+CSS(符合条件的样式规则)，经常使用的特性w3c共列出来13种。具体的能够参阅：Media features。为了更能理解Media Query，咱们在次回到前面的实例上：

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

转换成css中的写法为：

@media screen and (max-width: 600px) {
    选择器 {
      属性：属性值；
    }
  }

其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){…}的大括号之中。在语句上面的语句结构中，能够看出Media query和css的属性集合很类似，主要区别在：
一、Media query只接受单个的逻辑表达式做为其值，或者没有值；
二、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否知足某种条件的表达式；
三、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的状况
四、CSS属性要求必须有属性值，Media Query能够没有值，由于其表达式返回的只有真或假两种

  • not
  • and
  • or 也能够用逗号分隔
@media not screen and (color),print and (color)

@media not screen and (color) or print and (color)

@media (not(screen and (color))), print and (color)

//上面三个等价
//加了not有效范围只到逗号
  • only 防止老旧的浏览器不支持带媒体属性的查询，而应用到给定的样式

第一个，若是是老浏览器不支持媒体查询，只解析到only，老浏览器是不会应用后面的样式的 由于没有叫only的设备
第二个，无论后面的媒体查询样式怎么写，对于老的浏览器来讲，都会应用这样一段样式，由于它已经把后面的逻辑表达式忽略掉了，它的值永远为真。

注意: 通常咱们在对某个设备须要用媒体查询时候最好带上only 除非不须要兼容老浏览器

css3主要的媒体属性

响应式设计的断点

/*-----------iphone 4 and 4s -------------*/

/*  Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px)
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio:2){}
/*--------------iphone5 and 5s --------------*/

/* Portrait and Landscape */

@media only screen 
   and (min-device-width:320px)
   and (max-device-width:568px)
   and (-webkit-min-device-pixel-ratio:2){

   }

以上这种 针对特定设备来作样式选择* 作法不推荐，除非特例

要对屏幕类型

  • 小屏幕 0-480
  • 中屏幕 481-800
  • 大屏  801-1400
  • 巨屏  1400+
  • 这种划分结构

image.png

以上是经常使用的Media Query

这篇文章有对标准的各个标准设备总结Media Queries for Standard Devices

图片（Responsive Images）

视频

框架

  • Media Query 不得单独编排，必须与相关的规则一块儿定义
  • Media Query 若是有多个逗号分隔的条件时，应将每一个条件放在单独一行

image2019-9-13_7-39-35.png

精灵图

响应式网站设计原则

  • 渐进加强（pregressive enhancement）
  • 优雅降级 (grace degradation)

整站项目示例（自学能力强的同窗亲启）

注意：　我知道这不部份内容对同窗们来讲有点像天书，可是若是你以为本身学习能力不错，直接看这部分代码，并对照文档和有效使用搜索引擎。基本上把它学透，你就能够找工做了。

responsive.gif

项目内有文档

移动端媒体查询适配方案

html {
 font-size: 100px; /\* no \*/
 font-size: 27.777777vw;
}
@media screen and (max-width: 320px) {
 html {
 font-size: 88.888888px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 321px) and (max-width: 360px) {
 html {
 font-size: 100px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 361px) and (max-width: 375px) {
 html {
 font-size: 104.166666px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 376px) and (max-width: 393px) {
 html {
 font-size: 109.166666px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 394px) and (max-width: 412px) {
 html {
 font-size: 114.444444px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 413px) and (max-width: 414px) {
 html {
 font-size: 114.999999px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 415px) and (max-width: 480px) {
 html {
 font-size: 133.333333px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 481px) and (max-width: 540px) {
 html {
 font-size: 149.999999px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 541px) and (max-width: 640px) {
 html {
 font-size: 177.777777px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 641px) and (max-width: 720px) {
 html {
 font-size: 199.999999px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 721px) and (max-width: 768px) {
 html {
 font-size: 213.333333px; /\* no \*/
 font-size: 27.777777vw;
 }
}
@media screen and (min-width: 769px) {
 html {
 font-size: 213.333333px; /\* no \*/
 }
 html {
 width: 768px;  /\* no \*/
 margin: 0 auto;
 }
}

【拓展】CSS标准学习

CSS标准列表：http://www.w3.org/Style/CSS/current-work
学习目标：8周完成如下CSS标准的学习

学习进度：

拓展阅读

  1. CSS媒体查询
  2. Media Queries for Standard Devices
  3. REM vs EM – The Great Debate
  4. 在 @media 中，px、em、rem 用哪一个比较好？
  5. 不使用 Media Queries 的自适应 CSS
  6. 根据各类不一样的 media 属性，调试 CSS 效果
  7. css transition
  8. transition in css-trick
  9. 完整解析 CSS 動畫 ( CSS Animation )
  10. CSS-TRICKS animation
  11. CSS Animation Tricks: State Jumping, Negative Delays, Animating Origin, and More

  12. Cubic Bezier Generator : 

    1. https://cubic-bezier.com/#.17,.67,.83,.67
    2. http://yisibl.github.io/cubic-bezier/#.17,.67,.83,.67
    3. 算法： Bezier curve
  13. linear-gradient()
  14. W3C教程CSS教程
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程