响应式布局 相关

原创 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>






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

html5/css3响应式布局

html5图片自适应http://www.gbtags.com html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能。移动终端一般都是对css3支持比较好的...
  • wyaspnet
  • wyaspnet
  • 2015年02月25日 14:06
  • 2190

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

一理解几种布局的概念 1、静态布局(Static Layout) 即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;  意思就是不管浏览...
  • gertYY
  • gertYY
  • 2016年10月09日 10:55
  • 20974

html5 响应式布局示例

响应式布局 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联...
  • csdn9_14
  • csdn9_14
  • 2016年12月05日 23:10
  • 1563

响应式布局跟自适应布局的不同总结

第一点:自适应的目的是在不同分辨率的不同设备上面显示相同的页面。 手机的屏幕比较小,宽度通常在600像素以下,pc的像素一般在1000像素以上,部分配置高的笔记本在2000像素以上的也有,同样的页面要...
  • u010507417
  • u010507417
  • 2016年07月01日 17:03
  • 6371

<响应式布局>3---设计案例样式文件的另一种引入方式

1.main.html: 响应式网站布局 header left main right footer ...
  • Fuego801
  • Fuego801
  • 2016年03月29日 21:31
  • 664

典型的响应式布局实例代码

响应式布局-样式表中内嵌法 header sidebarLeft main sidebarRight footer...
  • lichbin
  • lichbin
  • 2014年04月15日 15:14
  • 6416

常见的响应式布局方式

布局类型 在谈响应式布局前,我们先梳理下网页设计中整体页面排版布局,常见的主要有如下几种类型:   布局实现 采用何种方式实现布局设...
  • bboyjoe
  • bboyjoe
  • 2016年03月31日 10:54
  • 2389

实现响应式布局的方式-CSS3实现

如何实现响应式布局: 1. css3-Media Query //最简单的方式 2. 原生JavaScript //成本高 不建议使用 3. 第三方开源框...
  • Makenzie
  • Makenzie
  • 2017年08月04日 16:45
  • 338

响应式布局基础二:设置viewport

在开发PC端的网站的时候,我们通常需要根据屏幕分辨率的大小,通过css的媒体查询,设置响应的像素大小。 在开发手机网站的时候,通常也需要这样设置的。但是在手机端,还需要多设置viewport这个元素。...
  • a767536305
  • a767536305
  • 2016年02月23日 22:04
  • 421

移动web开发响应式布局总结

首先来理解三个概念。一、viewport深入理解 我们在开发移动设备的网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中: 该meta标签的作用是让当前viewport的...
  • zerlinda_c
  • zerlinda_c
  • 2015年12月17日 19:02
  • 3748
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:响应式布局 相关
举报原因:
原因补充:

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