响应式网站中图片资源的简单切换

在css中使用如下代码即可实现图片资源的切换

/*media query  宽度超过 700px 时执行，尽量少用，过度使用会导致页面过于臃肿混乱*/
/* 在手机上展示小图 */
background-image: url('smallImage.png');

/* 在更大的屏幕上展示大图 */
@media(min-width:700px){
background-image: url('bigImage.png');
}

改变字体大小

@media(min-width:700px){
body{
font-size: 10px;
}
}

还可通过引入 文件的形式，在HTML头部引入

<link rel="stylesheet" media="(min-width:700px)" href="large.css" />

在large.css 中可写多个元素，作用与 “@media(min-width:700px)” 一样，为在大屏中所展示的样式