html引入响应式css,css根据屏幕宽度加载css文件来设计响应式自适应页面

要设计一个要在pc和手机端都通用且正常显示的页面也是很简单的，原理就是在不同设备和不同宽带下加载不同的样式文件，来控制元素的显示和大小等。首先要设置移动设备友好优先

在网页代码的头部，加入一行viewport元标签,让网页宽度自动缩放

在网页的

中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度，下面是这些属性的解释：

1)width=device-width ：表示宽度是设备屏幕的宽度

2)initial-scale=1.0：表示初始的缩放比例，1.0就是占网页的100%

3)minimum-scale=1.0：表示最小的缩放比例

4)maximum-scale=1.0：表示最大的缩放比例

5)user-scalable=no：表示用户是否可以调整缩放比例

2.根据屏幕宽度加载css文件

"自适应网页设计"的核心，就是CSS3引入的Media Query模块。自动探测屏幕宽度，然后加载相应的CSS文件

方式一 在html文件引入不同的css文件

方式二 在css文件中引入不同的css文件@import url("css/pcStyle.css") screen and (min-width:1000px);

@import url("css/mpStyle.css") screen and (max-width:1000px);

注意:可以使用max(min)-device-width或者max(min)-width。前者是设备的宽度，后者是浏览器的宽度，在pc上你缩放浏览器宽度，用device-width是不会执行代码的，而用后者就可以。

3.另外字体和图片也要自适应

字体也不能使用绝对大小(px)，而只能使用相对大小(em)。页面基本参照像素是16px。