响应式布局 大中小屏幕

最近在研究响应式布局，觉得挺好用的。给大家分享一下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title></title>
    <style>
        *{
            padding:0;
            margin:0;

        }
        .container{
            background-color: #ffff00;
            margin:auto;
        }
        header{
            width:100%;
            height:100px;
            background: red;
        }
        .left-nav{
            background: blue;
            height:500px;
        }
        .content{
            background: green;
            height:500px;
        }
        .right-aside{
            background: bisque;
            height:500px;
        }
        footer{
            width:100%;
            height:100px;
            background: #00ffff;
            clear:both;
        }
        .left-nav input{
            display: none;
        }

        @media screen and (min-width: 992px){
            .container{
                width:992px;
            }
            .left-nav{
                width:200px;
                float:left;
            }
            .content{
                width:500px;
                float:left;
            }
            .right-aside{
                width:292px;
                float:left;
            }

        }
        @media screen and (min-width:768px) and (max-width:992px){
            .container{
                width:768px;
            }
            .left-nav{
                width:150px;
                float:left;
            }
            .content{
                width:618px;
                float:left;
            }
            .right-aside{
                display:none;
            }
        }
        @media screen and (max-width:768px){
            .container{
                width:100%;
            }
            .left-nav{
                width:100%;
                height:50px;
            }
            .content{
                width:100%;
            }
            .right-aside{
                display:none;
            }
            .left-nav input{
                display: block;
            }
        }
        .height{
            height:500px;
        }
    </style>

</head>
<body>
    <div class="container">
        <header>

        </header>
        <nav class="left-nav">
            <input type="button" value="更多" onclick="more()"/>
        </nav>
        <section class="content">

        </section>
        <aside class="right-aside">

        </aside>
        <footer>

        </footer>
    </div>
</body>
<script src="../js/jquery-1.9.1.min.js"></script>
<script>

    function more(){
        $(".left-nav").toggleClass("height");
    }
</script>
</html>
时间： 2024-08-01 20:22:19

响应式布局 大中小屏幕的相关文章

使用bootstrap响应式布局——手机屏幕中横向滚动显示标签页选项

导航栏到小屏幕的时候,我们的处理办法是隐藏为一个按钮.可是选项卡的标签页部分,我们的处理办法是加一个水平滚动条.但是加水平滚动条需要解决一个问题,就是宽度的问题,如果不设置宽度,他就会根据屏幕大小自适应,这样的话就会出现换行掉下去的情况,不会出现横向滚动条. 1.动态给ul设置宽度 遍历li元素求出所有的li的宽度和,这样就能动态给ul设置宽度. 2.给ul父盒子设置overflow-x:scroll;属性

响应式布局和自适应布局的不同

学了前端一段时间了,发现大家都搅浑了自适应布局和响应式布局的差别.现在我来和大家说下它们的不同: 自适应的体验   http://m.ctrip.com/html5/响应式的体验   http://segmentfault.com/ 整理了自己查阅的知识点,给各位一些提示. 起初,网页设计者都会涉及固定宽度的页面,最开始的电脑显示器分辨率种类不多,因为当时本来电脑就少,即使有变化也是800,850,870,880,比如开源中国的网页就是固定宽度为998来定制的,至于为啥是998,我也不知道...

自适应屏幕的jQuery响应式布局网站特效代码

jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery响应式布局_宽屏响应式焦点图片动画轮播代码 css3绘图制作css3响应式组织架构图形代码 jQuery css3图片翻转响应式布局翻转图片筛选器代码 jquery html5响应式幻灯片插件网站响应式全屏幻灯片轮播代码 jQuery响应式焦点图插件制作响应式全屏焦点图切换代码 jQuery html5全屏响应式幻灯片制作触屏手机幻灯片代码 jQuery图片响应式布局点击弹出图片响应式幻灯片代码 jquery 3d响应式幻灯片

响应式布局

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. 在可视区域的宽度小于 600px 的时候被应用. @media screen and

html5 响应式布局（媒体查询）

响应式布局 响应式布局,简而言之,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式. html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的

响应式布局二

现在响应式布局用得比较大众的应该是Bootstrap,但是我并不打算使用.原因很简单,我对Bootstrap不熟悉不了解.然后 我简单的看了下Bootstrap是怎么实现的响应式布局.原理很简单,就是使用到了CSS3中的media.media何方神圣?可以用来吃吗?它可以针对不同的媒体类型定义不同的样式,也可以针对不同的屏幕尺寸设置不同的样式.且当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面.既然如此,响应式何愁. 在可视区域的宽度小于 600px 的时候被应用. @me

响应式布局中的CSS相对量

一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格.在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需要用到"自适应的图片"."流动布局"等技术. 体现在 CSS 代码编写上,就需要前端开发人员精准掌握特定属性的相对量表示方法.然而,其中一些相对量的计算方法很容易混淆. 本文在完整梳理全部 CSS 属性基础上,将其中的"相对单位.百分比相对量.数字相对量&quo

html5 响应式布局

响应式布局 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本.打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落里的某个地方就好比父元素,由于父元素空间的改变,我们不得不调整div,让它能够依然放在角落里.在项目中你会遇到不同的终端,由于终端分辨率不同,所以你要想让用户体验更好,就必要让你的页面能够兼容多个终端. 第二:响应式设计的步骤 响应式设计的步骤就是1.编

响应式布局(收藏)

在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型: 布局类型 布局实现 采用何种方式实现布局设计,也有不同的方式,这里基于页面的实现单位而言,分为四种类型:固定布局.可切换的固定布局.弹性布局.混合布局. 固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸: 可切换的固定布局:同样以像素作为页面单位,参考主流设备尺寸,设计几套不同宽度的布局.通过设别的屏幕尺寸或浏览器宽度,选择最合适的那套宽度布局: 弹性布局:以百分比作为页面的基本单位