【CSS3】响应式布局的实际应用的小例子

如今响应式布局在web app开发中应用得非常广泛,现在的手机屏幕的分辨率基本在320px到640px之间,在窄屏和宽屏我们的显示方式可能会略有不同。本文简单介绍一个应用得非常多的小例子。

当屏幕宽度大于640px时,显示6列选项,当小于640px时显示两排,每排3列,这种样式在web app里的很多选项的样式中应用得很广泛。

其实实现上面的效果很简单,主要通过CSS3的媒体查询和calc()属性来对算术表达式求值就可以做到,具体实现可以查看以下源代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        .w-catg{
            padding: 10px;
        }

        .item{
            float: left;
            display: block;
            height: 80px;
            width: calc(100% /3 - 2px);
            border: 1px solid red;
            background-color: yellow;
        }

        @media (min-width: 640px){
            .item{
                width: calc(100% /6 - 2px);
            }
        }

    </style>
</head>
<body>
<section class="w-catg">
    <a href="###" class="item"></a>
    <a href="###" class="item"></a>
    <a href="###" class="item"></a>
    <a href="###" class="item"></a>
    <a href="###" class="item"></a>
    <a href="###" class="item"></a>

</section>

</body>
</html>
时间: 2024-10-16 23:33:42

【CSS3】响应式布局的实际应用的小例子的相关文章

html5/css3响应式布局介绍及设计流程

html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局的媒体查询media query兼容问题 一个普通的自适应显示的三栏网页,当你用不同的终端来查

css3响应式布局

css3的新特性响应式布局,通过@media screen and (min-width: ) and (max-width: ) {}:来实现页面的响应式设计,来适应不同的终端.需在头部添加:<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0">. 1.适应手机端: 例如: @media scree

CSS3&ndash;2.css3 响应式布局

1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够兼容多个终端--而不是为每个终端做一个特定的版本.也就说一个页面可以在多个终端呈现出你想要的效果,能够兼容各个终端. 优点: 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 根据不同的显示器调整设计最适合用户浏览习惯的页面 缺点: 兼容各种设备工作量大,效率低下 代码累赘,会出现隐藏

CSS3响应式布局案例

布局结果图: 电脑全屏: 手机浏览: 竖屏: 横屏: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>响应式布局</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maxi

CSS3响应式布局之弹性盒子

CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局.同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间. 自己写了一个弹性盒子的demo: 主要HTML代码: <div class="outer"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3"

html5 响应式布局(媒体查询)

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

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

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

css3媒体查询实现网站响应式布局

响应式建筑设计.响应式家具设计.响应式办公设计,这些词可能是已有的专业名词,也可能是我自己想出来的一些名词.因为在生活中,我们常常会见到很多让人惊叹的设计,为什么同一套东西经过不同的方式变化之后会给人不同的使用感受和体验呢?这样既节约制造成本,又节省空间,还能体验创意性的生活. 先来给大家欣赏几张图大黄蜂: 沙发床: 没错!大黄蜂为应对紧急战斗而瞬间由汽车变为战斗机,沙发床.沙发座椅是我们见过再平常不过的家具了.我们总是惊叹外国人为什么有这么丰富的想象力和神奇的创造力.而是什么驱动他们去想象进而

css3 flex流动自适应响应式布局实例 转

转自:http://www.tuicool.com/articles/auEbMzU   感谢他的分享, 一.图片自适应居中 实例图: 实例HTML: <div class="demo"> <img src="http://dummyimage.com/100x100" alt=""> </div> <div class="demo"> <img class="&