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

在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)” 一样，为在大屏中所展示的样式