响应式页面组成

  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. 我的前端页面开发js简易有效环境

    前端开发主要涉及到html, css(less/sass), javascript这几个方面的知识.真正的快速有效开发,必须实现所谓所见即所得.在构建生产时,可能需要使用gulp/grunt等task ...

  2. 爬虫入门之Scrapy框架实战(新浪百科豆瓣)(十二)

    一 新浪新闻爬取 1 爬取新浪新闻(全站爬取) 项目搭建与开启 scrapy startproject sina cd sina scrapy genspider mysina http://roll ...

  3. linux下查看磁盘文件系统

    df -Th fdisk -l parted -l lsblk -f blkid

  4. July 16th 2017 Week 29th Sunday

    Opportunities are like sunrises, if you wait too long, you miss them. 机会如同日出,等得太久就会错过. Indecision is ...

  5. mongdb时间类型

    Date() 显示当前的时间new Date 构建一个格林尼治时间   可以看到正好和Date()相差8小时,我们是+8时区,也就是时差相差8,所以+8小时就是系统当前时间ISODate() 也是格林 ...

  6. springmvc常用注解标签详解(转载)

    1.@Controller 在SpringMVC 中,控制器Controller 负责处理由DispatcherServlet 分发的请求,它把用户请求的数据经过业务处理层处理之后封装成一个Model ...

  7. BZOJ4011:[HNOI2015]落忆枫音(DP,拓扑排序)

    Description 「恒逸,你相信灵魂的存在吗?」 郭恒逸和姚枫茜漫步在枫音乡的街道上.望着漫天飞舞的红枫,枫茜突然问出这样一个问题.  「相信吧.不然我们是什么,一团肉吗?要不是有灵魂……我们也 ...

  8. 第三章.搭建MyBatis工程环境

    1.数据库的准备: 数据库: create DATABASE mybatis: 数据表: CREATE TABLE `user` ( `id` int(10) NOT NULL AUTO_INCREM ...

  9. ASP.NET Web API编程——异常捕获

    1 向客户端发送错误消息 使用throw new HttpResponseException()向客户端抛出错误信息. HttpResponseException包含两个重载的构造函数,其中一个是构造 ...

  10. Selenium应用代码（读取excel的内容进行注册的案例）

    1. 封装读取excel数据的方法:import java.io.*;import java.util.ArrayList;import java.util.List; import jxl.*;im ...