响应式布局 相关

原创 2015年11月21日 13:39:50


实现响应式布局  :  css3 中的media query ->最简单的方式   或者 使用JavaScript ->成本高,不推荐 或者 第三方开源框架;


常见属性: device-width , device-height ,屏幕宽高

     width,height ,渲染窗口宽高

     orientation , 设备方向

     resolution , 设备分辨率

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link type="text/css" rel="stylesheet" href="link.css" <span style="color:#FF0000;">media="only screen and (max-width:480px)</span>"/>
    <style type="text/css">
        <span style="color:#FF0000;">@media screen and (min-width: 480px)</span> {
            body{
                background-color: red;
            }
        }
    </style>
    <title></title>
</head>
<body>
</body>
</html>


确保设备能正常的显示响应式页面 必须添加
    <span style="color:#FF0000;"><meta name="viewport" content="width=device-width, initial-scale=1.0">

<code>    .container</code> 类用于固定宽度并支持响应式布局的容器。


</span>






版权声明:本文为博主原创文章,未经博主允许不得转载。

响应式布局

  • 2015年03月23日 15:32
  • 11.01MB
  • 下载

响应式布局

  • 2017年08月23日 15:44
  • 2KB
  • 下载

HTML5 -- 使用css3实现简单的响应式布局

本文简单的讲解了如何使用css3实现简单的响应式布局:html5文件: index01...

java实现响应式布局爬虫技术

  • 2015年04月18日 21:49
  • 654KB
  • 下载

HTML之meta&&响应式布局

meta在head标签中的meta标签,可以为HTML文档提供额外信息 meta属性主要分为两组 1.name属性与content属性 name属性用于描述网页,它是以名称/值形式的名称,nam...

bootstrap响应式布局学习日记

大学放寒假每天待在家里无聊的要死,打游戏又不起劲,于是又研究起了代码。 是这样的,比如我们在一个网页中有一个导航条,导航条上有许许多多选项,比如说有12个(因为bootstrap的栅格系统每行最多只有...
  • mate_ge
  • mate_ge
  • 2016年02月13日 00:38
  • 1260
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:响应式布局 相关
举报原因:
原因补充:

(最多只允许输入30个字)