美文网首页技术之栈
前端响应式布局简单实现

前端响应式布局简单实现

作者: 魏小厨 | 来源:发表于2017-02-24 16:28 被阅读0次

这个方法是监控页面大小,设置页面大小的范围,加载不同的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">

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

相关文章

  • 前端响应式布局简单实现

    这个方法是监控页面大小,设置页面大小的范围,加载不同的css文件 例子如下 例子中设置如果页面大小最大宽度为500...

  • web前端开发之几种布局方式之响应式布局

    web前端开发之几种布局方式之响应式布局

  • Bootstrap介绍

    Bootstrap是基于HTML、CSS、JavaScript的前端框架 Bootstrap用于响应式前端布局,移...

  • React Native 基础之 Flexbox 布局

    概述 Flexbox 译为弹性布局(这里我们简称 Flex),是CSS的一种布局方案,可以简单、完整、响应式的实现...

  • grid实现响应式布局

    一行 CSS 代码实现响应式布局 – 使用 Grid 实现的响应式布局 在这篇文章中,我将教你如何使用 CSS G...

  • 前端响应式布局原理与方案(详细版)

    前端响应式布局原理与方案(详细版) 引言 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是 ...

  • Android弹性布局(FlexboxLayout)

    Flexbox简介 flexbox是属于CSS的一种布局方案,可以简单、完整、响应式的实现各种页面布局。谷歌将其引...

  • 响应式布局目录

    └─Web响应式布局├─1 响应式布局介绍├─2 响应式布局实例(Media Queries模块) 上├─3 响应...

  • 九、HTML5响应式布局

    @(HTML5)[相应式布局] [TOC] 九、HTML5响应式布局 什么是响应式网页设计(布局) 响应式网页设计...

  • 响应式布局总结

    什么是响应式布局? 简单来说就是:一套代码,兼容多个终端设备,能根据屏幕尺寸自动调整布局 响应式布局适用场景不多,...

网友评论

    本文标题:前端响应式布局简单实现

    本文链接:https://www.haomeiwen.com/subject/gwuwwttx.html