[分享]css3手机端

CSS3 在手机端的应用越来越广泛，在设计响应式网页时常常会使用到 CSS3 的功能。下面我们就来谈谈 CSS3 在手机端的常用属性和作用。一、 media querymedia screen and...

CSS3 在手机端的应用越来越广泛，在设计响应式网页时常常会使用到 CSS3 的功能。下面我们就来谈谈 CSS3 在手机端的常用属性和作用。

一、 media query

@media screen and (max-width: 600px) {
  body {
    background-color: red;
  }
} 

使用 media query 可以根据不同设备的屏幕尺寸选择不同的样式表，从而达到响应式设计的效果。

二、 transform

#box {
  transform: rotate(45deg);
} 

transform 属性可以实现元素的旋转、缩放、移动等效果，是手机端常用的属性之一。

三、 transition

a:hover {
  transition: color 1s ease;
  color: red;
} 

transition 可以产生平滑的效果过渡，是用来制作过渡动画的重要属性。

四、 border-radius

button {
  border-radius: 5px;
} 

border-radius 可以实现圆角的效果，让页面更加美观。

以上四个属性是手机端常用的 CSS3 属性，当然还有很多其他的 CSS3 属性可以在手机端使用，如 box-shadow、opacity 等。