响应式页面组成

  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. Vue2.0中的系统指令

    v-on注册事件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  2. Ganglia安装

    一.rrdtool安装 1.1 安装依赖包 由于rrdtool依赖的包比较多,而且包之间也存在依赖,故使用yum安装由于服务器无法联网,故使用iso文件创建本地yum源,方法见下: (1)创建iso存 ...

  3. lsqnonlin函数使用方法

    非线性最小二乘函数  lsqnonlin  格式x = lsqnonlin(fun,x0) %x0 为初始解向量:fun为,i=1,2,-,m,fun返回向量值F,而不是平方和值,平方和隐含在方法中, ...

  4. SQL点点滴滴_聚集索引设计指南-转载

    聚集索引基于数据行的键值在表内排序和存储这些数据行, 每个表只能有一个聚集索引, 因为数据行本身只能按一个顺序存储. 有关聚集索引体系结构的详细信息, 请参阅 聚集索引结构. 每个表几乎都对列定义聚集 ...

  5. leetcode-distinct sequences

    Solution: when see question about two strings , DP should be considered first. We can abstract this ...

  6. 安装nginx及依赖包

    #!/bin/bash #auto zhangjia #date 20171007#安装SSL##################################################### ...

  7. Python学习---Python下[列表]的学习

    列表[list]用中括号[]表示,处理一组有序项目的数据结构,列表的类型是可变的数据类型,类型是list 列表是可变/线程不安全的 # type(a) = list  利用type判断元素离线 # 切 ...

  8. Sandworm Attack小结

    这个漏洞刚出来时就分析过,当时大致弄明白了原理,但对很多细节和原理还是一知半解.后来开始找工作……今天终于有时间来把欠的这部分功课补上. 这个漏洞网上的各种中英文分析已经很多了,因此这里我只根据自己的 ...

  9. January 30 2017 Week 5 Monday

    I can accept defeat but could not accept to give up. 我可以接受失败,但不能接受放弃. Fortune has not always smiled ...

  10. ZT Abstract Factory

    实际上,Abstract Factory 模式是为创建一组(有多类)相关或依赖的对象提供创建接口,而 Factory 模式正如我在相应的文档中分析的是为一类对象提供创建接口或延迟对象的创建到子类中实现 ...