响应式页面组成

  1. 灵活图像，媒体；资源尺寸使用百分比定义
  2. 流式布局，所有width属性使用百分比设定，水平属性通常使用相对单位（em,百分数，rem等）
  3. 媒体查询，根据媒体特征进行设计调整

创建可伸缩图像

  1. html中不指定width,height属性
  2. 在css表中使用max-width:100%；（不使用width:100%；会让图像竟可能填充容器，如果容器的宽度比图像宽，图像就会放大到超过本来尺寸，显示不好看）

创建弹性布局网格

  1. 元素的百分数宽度基于其父元素提供的可用空间：要指定的宽度（px为单位）/容器宽度（px） = 值；
  2. .page{
  max-width:960px;
}
.main{
 width:62.5%;
/*要求宽度(600px)/容器宽度（960px）= 62.5%*/
}

    可以设置相对的max-width；默认的字体大小是16px；em宽度是基于元素字体大小

    .page{
 max-width:60em;
/*960px / 16px = 60 */
}

媒体查询

增强媒体类型方法，允许根据特定的设备特性定位样式，要调整网站的呈现样式，让其适应不同的屏幕尺寸

  1. 可以包含在媒体查询里的特性：width,height,device-width(设备宽度),device-height,orientation(方向),aspect-ratio(高宽比)，color，color-index(颜色数),monochrome(单色)，resolution(分辨率),scan(描述),grid（栅格），-webkit-device-pixel-ratio（webkit设备像素比），-moz-device-pixel-ratio（mozilla设置像素比）
  2. 使用link元素的media属性 
    <head>
    <link rel="stylesheet" href="your-styles.css" media="logic type and (feature:value)" />
<!-- 仅用于支持媒体查询且视觉区域不低于480px的浏览器 -->
　　<link rel="stylesheet" href="your-style.css" media="only screen and (min-width:480px)">
</head>
  3. 在样式表中使用@media规则 
    @media logic type and (feature:value){
/* 目标css样式规则写在这里 */
}
/* the logic is only
 the type is screen
 the feature:value is min-width:480px
*/
@media only screen and (min-width:480px){
 p {
    color:red;
    font-weight:bold;
   }
}
  4. logic（逻辑）值为：noly 和 not ； 
    1. 　　only 确保旧的浏览器不读取余下的媒体查询，同时忽略链接的样式表
    2. 　　not 对媒体查询的结果取反
  5. type（类型）媒体类型，screen print 等
  6. featrue: value  ;使用需要加上 and ( min-width:480px)
  7. 视觉区域：浏览器显示页面的区域，不包含浏览器地址栏，按钮；
    1. 　　媒体查询的width特性 ----- 视觉区域的宽度
    2. 　　device-width特性 ------- 屏幕的宽度
    3. 　  移动端上显示网站缩小的样子，可以添加meta元素，使得视觉区域的宽度会被设置与设备宽度相同的值 
      <meta name="viewport" content="width=device-width,initial-scale=1"></head>

h5和css3构建响应式网站的更多相关文章

  1. Skeljs – 用于构建响应式网站的前端开发框架

    skelJS 是一个轻量级的前端框架,用于构建响应式站点和应用程序.让设计人员和开发人员可能够使用四个强大的组件:CSS 网格系统,响应式处理程序,CSS 的快捷方式和插件系统. 您可能感兴趣的相关文 ...

  2. 使用 Responsive Elements 快速构建响应式网站

    Responsive Elements 可以使任何元素来适应和应对他们所占据的区域.这是一个轻量的 JavaScript 库,你可以轻松嵌入到你的项目.元素会更具自己的宽度,自动响应和适应空间的增加或 ...

  3. html 构建响应式网站之viewport的使用

    在网页代码的头部,加入一行viewport元标签 <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. 为何企业钟爱H5响应式网站? html5响应式网站的优势与特点

    随着移动互联网时代的到来,H5响应式网站应运而生,并成功获得了商家.访客.搜索引擎等的青睐!越来越多的企业也选择了H5响应式建站,可为何企业钟爱H5响应式网站呢?难道传统网站不好吗?这个不能妄下结论, ...

  5. 了解Bootstrap和开发响应式网站

    什么是Bootstrap? Bootstrap是Twitter推出的一个开源的用于web前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CS ...

  6. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  7. css媒体查询：响应式网站

    css媒体查询:响应式网站 媒体查询 包含了一个媒体类型和至少一个使用如宽度.高度和颜色等媒体属性来限制样式表范围的表达式.CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围. ...

  8. CSS 媒体查询创建响应式网站

    使用 CSS 媒体查询创建响应式网站  适用于所有屏幕大小的设计 固定宽度的静态网站很快被灵活的响应式设计所取代,该设计可以根据屏幕大小进行上扩和下扩.利用响应式设计,无论您采用什么设备或屏幕来访问网 ...

  9. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

随机推荐

  1. 【Udacity】异常值检测/删除

    Outlier Detection

  2. 函数arguments对象

    一.arguments对象 arguments 是一个对应于传递给函数的参数的类数组对象. 二.语法 arguments 三.描述 arguments对象是所有(非箭头)函数中都可用的局部变量.你可以 ...

  3. 使用intellij idea搭建MAVEN+SSM(Spring+SpringMVC+MyBatis)框架

    基本概念 使用SSM(Spring,SpringMVC和Mybatis) 1.1.Spring Spring是一个开源框架,Spring是于2003 年兴起的一个轻量级的Java 开发框架,由Rod  ...

  4. Dubbo框架介绍与安装 Dubbo 注册中心(Zookeeper-3.4.6)

    背景 随着互联网的发展,网站应用的规模不断扩大,常规的垂直应用架构已无法应对,分布式服务架构以及流动计算架构势在必行,亟需一个治理系统确保架构有条不紊的演进. • 单一应用架构 • 当网站流量很小时, ...

  5. 未在本机注册Microsoft.ACE.OleDb.12.0

    服务器版本:Windows Server 2008 R2 64位.IIS7 已经安装了Microsoft Access database engine 2010 X64. 在服务器上可以用SQL Se ...

  6. MySQL案例02：ERROR 1221 (HY000): Incorrect usage of DB GRANT and GLOBAL PRIVILEGES

    MySQL在授权用户时出现报错信息,具体信息如下: 一.错误信息 执行命令: GRANT SELECT,INSERT, UPDATE, DELETE, CREATE, DROP, RELOAD, SH ...

  7. 如何深入理解一套MQ消息中间件

    怎样算是理解了一套MQ中间件呢?原来一知半解的我列了几个维度:demo跑起来,理解其投递次数的语义,理解其事务的特性等等.这是一种角度,但总有种看山不是山的一知半解的感觉.再问一层,比如为什么Kafk ...

  8. ZT JAVA WeakReference

    JAVA WeakReference 分类: JAVA 2012-08-28 16:08 305人阅读 评论(0) 收藏 举报 javareferencehashmapcacheclassnull 在 ...

  9. 用CI框架向数据库中实现简单的增删改查

    以下代码基于CodeIgniter_2.1.3版 用PHP向数据库中实现简单的增删改查(纯代码)请戳 http://www.cnblogs.com/corvoh/p/4641476.html Code ...

  10. HDU 6206 Apple (高精确度+JAVA BigDecimal)

    Problem Description Apple is Taotao's favourite fruit. In his backyard, there are three apple trees ...