前端响应式布局简单实现

这个方法是监控页面大小,设置页面大小的范围,加载不同的css文件

例子如下

<html>
    <head>  
        <meta name="viewport" content="width=device-width,initial-scale=1">
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
        <link rel="stylesheet" type="text/css" media="screen and (max-width:500px)" href="smallcss.css">
        <link rel="stylesheet" type="text/css" media="screen and (min-width:500px)" href="comcss.css">
    </head>
    <body>
            <div class="topbar">         
                            
            </div>
            <div class="main">
                
            </div>
    </body>
</html>

例子中设置如果页面大小最大宽度为500px 则用smallcss.css,如果页面最小宽度为500px,则用comcss.css

这个方法要在最前面加一行代码<meta name="viewport" content="width=device-width,initial-scale=1">

还可以设置最大/最小高度等

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容