响应式页面组成

  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. BEM,SASS,LESS,bootstrap:如何有效地将这些方法，工具和框架聪明地整合？

    https://medium.com/@andersonorui_/bem-sass-and-bootstrap-9f89dc07d20f Bootstrap是一个“HTML,CSS和Javascri ...

  2. Linux ->> scp命令复制对端机器上的文件/文件夹

    scp是secure copy的简写,用于在Linux下从远程机器拷贝文件. 特点: 传输是加密的,稍微影响了一下速度.而相比较rsync,它对于资源的占用还是有优势的. 用法 scp [参数] [原 ...

  3. mongodb 3.4复制集配置

    1:启动三个实例 /bin/mongod --config /home/mongodb/db27017/mongodb27017.conf /bin/mongod --config /home/mon ...

  4. Web API 2 入门——创建ASP.NET Web API的帮助页面（谷歌翻译）

    在这篇文章中 创建API帮助页面 将帮助页面添加到现有项目 添加API文档 在敞篷下 下一步 作者:Mike Wasson 创建Web API时,创建帮助页面通常很有用,以便其他开发人员知道如何调用A ...

  5. MQ测试

    2015年8月13日23:14:52 测试RabbitMq ====================== 千兆局域网:send ≍10000/s  receive ≍7000/s 百兆局域网:send ...

  6. 用QT写一个对话框

    打开QT creater创建取名去findDialog的项目,这个项目要基于QDialog.直接上FindDialog.h的头文件. #ifndef FINDDIALOG_H #define FIND ...

  7. C++的虚析构

    最近准备复习一遍所有的知识点,先从基础开始做起,用几分钟写个继承和析构吧. 父类为A,子类为B,代码如下: class A { public: A() { cout << "构造 ...

  8. Linux内核收包过程

    net/core/dev.c int __init net_dev_init(void) { queue->backlog.poll = process_backlog; open_softir ...

  9. Vim快捷输出查找寄存器的内容（去除\<，\>和\V）

    Vim自带的*搜索会自动在单词两头加上\<和\>,使用第三方的vnoremap *,则是加上前缀\V, 当我们想要输出刚刚搜索的内容时可用<C-r>/,但是很可能会带上多余的符 ...

  10. 全国大学生数据挖掘邀请赛中的NDCG

    转:http://www.zhizhihu.com/html/y2011/2794.html 评价标准 性能良好的评分模型,应该能够给予那些引起msg或click的候选会员更高的评分(排序靠前),从而 ...