css属性之@media-阿里云开发者社区

开发者社区> 桃子红了呐> 正文

css属性之@media

简介:
+关注继续查看

Base Browsers: IE6.0+, Firefox2.0+, Chrome4.0+, Safari6.0+, Opera15.0+

<expression>:指定媒体查询使用的媒体特性。这类似于CSS属性,如:max-width:960px。(CSS3)

实例

自适应效果

复制代码
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style>
body {
    font-family:"Lucida Sans", Verdana, sans-serif;
}

.main img {
    width:100%;
}

h1{
    font-size:1.625em;
}

h2{
    font-size:1.375em;
}

.header {
    padding:1.0121457489878542510121457489879%;
    background-color:#f1f1f1;
    border:1px solid #e9e9e9;
}

.menuitem {
    margin:4.310344827586206896551724137931%;
    margin-left:0;
    margin-top:0;
    padding:4.310344827586206896551724137931%;
    border-bottom:1px solid #e9e9e9;
    cursor:pointer;
}

.main {
    padding:2.0661157024793388429752066115702%;
}

.right {
    padding:4.310344827586206896551724137931%;
    background-color:#CDF0F6;
}

.footer {
    padding:1.0121457489878542510121457489879%;
    text-align:center;
    background-color:#f1f1f1;
    border:1px solid #e9e9e9;
    font-size:0.625em;
}

.gridcontainer {
    width:100%;
}

.gridwrapper {
    overflow:hidden;
}

.gridbox {
    margin-bottom:2.0242914979757085020242914979757%;
    margin-right: 2.0242914979757085020242914979757%;
    float:left;
}

.gridheader {
    width:100%;
}

.gridmenu {
    width:23.481781376518218623481781376518%;
}

.gridmain {
    width:48.987854251012145748987854251012%;
}

.gridright {
    width:23.481781376518218623481781376518%;
    margin-right:0;
}

.gridfooter {
    width:100%;
    margin-bottom:0;
}

@media only screen and (max-width: 500px) {
    .gridmenu {
        width:100%;
    }

    .menuitem {
        margin:1.0121457489878542510121457489879%;
        padding:1.0121457489878542510121457489879%;
    }

    .gridmain {
        width:100%;
    }

    .main {
        padding:1.0121457489878542510121457489879%;
    }

    .gridright {
        width:100%;
    }

    .right {
        padding:1.0121457489878542510121457489879%;
    }

    .gridbox {
        margin-right:0;
        float:left;
    }
}

</style>
</head>
<body>
<div class="gridcontainer">
    <div class="gridwrapper">
        <div class="gridbox gridheader">
            <div class="header">
                <h1>The Pulpit Rock</h1>
            </div>
        </div>
        <div class="gridbox gridmenu">
            <div class="menuitem">The Drive</div>
            <div class="menuitem">The Walk</div>
            <div class="menuitem">The Return</div>
            <div class="menuitem">The End</div>
        </div>
        <div class="gridbox gridmain">
            <div class="main">
<h1>The Walk</h1>
<p>The walk to the Pulpit Rock will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p>
<img src="pulpitrock.jpg" alt="Pulpit rock" width="" height="">

            </div>
        </div>
        <div class="gridbox gridright">
            <div class="right">
<h2>What?</h2>
<p>The Pulpit Rock is a part of a mountain that looks like a pulpit.</p>
<h2>Where?</h2>
<p>The Pulpit Rock is in Norway</p>
<h2>Price?</h2>
<p>The walk is free!</p>
            </div>
        </div>
        <div class="gridbox gridfooter">
            <div class="footer">
<p>This web page is a part of a demonstration of fluid web design made by www.w3schools.com. Resize the browser window to see the content response to the resizing.</p>
            </div>
        </div>
    </div>
</div>
</body>
</html>
            
复制代码

正常效果

 

宽度小于500的效果


本文转自TBHacker博客园博客,原文链接:http://www.cnblogs.com/jiqing9006/p/5090700.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10053 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13866 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
11887 0
CSS Content 属性妙用
CSS Content 属性妙用,你知道吗?
522 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7359 0
4269
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载