CSS3 实现电脑端和手机端页面自适应

1、通过link方法

link方法引入媒体类型其实就是在<link>标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。这种方式引入媒体类型时常跟着引用的样式文件走，如下所示。

<!--手机端-->
<link rel="stylesheet" type="text/css" href="style_phone.css" media="screen and (max-width: 960px)"/>
<!--电脑端-->
<link rel="stylesheet" type="text/css" href="style_PC.css" media="screen and (min-width: 960px)"/>

2、使用@media

@media是CSS3中引进的一个特性，称为媒体查询，可以直接写在<style></style>中间或者外部样式文件中。例如，查询媒体是否是屏幕，屏幕尺寸是否小于960px：

@media screen and (max-width: 960px){
  /* 手机端CSS代码 */
}

@media screen and (min-width: 960px){
  /* 电脑端CSS代码 */
}

以上就是最经典判断是电脑端还是手机端。

备注：960px只是一个大概的数值，如果要做到完美适配还是要看显示屏。