一丶CSS3的@media 查询

  使用 @media 查询,你可以针对不同的屏幕大小定义不同的样式。 @media 可以针对不同的屏幕尺寸设置不同的样式,特别是如果你需要设置设计响应式的页面,@media 是非常有用的。 当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面,这对调试来说是一个极大的便利。

  1. @media mediaType and|not|only (media feature) {
  2. /*CSS-Code;*/
  3. }

  媒体类型(mediaType):   screen:  电脑屏幕,平板电脑,智能手机. speech:屏幕阅读器等发声设备

  media feature:

    1.max-width:定义输出设备中的页面最大可见区域宽度

    2.min-width:定义输出设备中的页面最小可见区域宽度

  1.编写响应式页面

    (1)设置Meta标签

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

  width = device-width:宽度等于当前设备的宽度

  initial-scale: 初始的缩放比例(默认设置为1.0,即代表不缩放)

  user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面)

    (2)加载兼容文件JS

  1. <!--[if lt IE 9]>
  2.   <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  3.   <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
  4. <![endif]-->

    (3)设置IE渲染方式默认为最高(可选)

  1. <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

    ps:这段代码后面加了一个chrome=1,如果用户的电脑里安装了 chrome,就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算,如果没有安装,就显示IE最新的渲染模式。

  示例:

  (1)如果文档宽度大于等于 1170px 则应用花括号内的样式——修改body的背景颜色(background-color):

  1. @media screen and (min-width: 1170px) {
  2. body {
  3. background-color:lightblue;
  4. }
  5. }

  (2)当文档宽度大于等于 768px 并且小于等于992px ( width >=768 && width <=992)的时候显示的样式

  1. @media screen and (min-width:768px) and (max-width:992px) {
  2. /* CSS 代码 */
  3. }

二丶移动端单位介绍

  在W3C中把尺寸单位划为两类:相对长度单位和绝对长度单位

  然而相对长度单位按照不同的参考元素,又可以分为字体相对单位和视窗相对单位

  字体相对单位有:em、ex、ch、rem;

  视窗相对单位则包含:vw、vh、vmin、vmax几种

  绝对定位则是固定尺寸,它们采用的是物理度量单位:cm、mm、in、px、pt以及pc。但在实际应用中,我们使用最广泛的则是em、rem、px以及百分比(%)来度量页面元素的尺寸。

  px: 绝对(固定)单位
  缺点:任何情况下都是固定值,会导致布局在不同尺寸下的设备错位

  %:相对定位(会有影响发生变化)相对于父级(自身)大小进行定位
  缺点:能确定范围的还是比较好计算的,对于不太好确定值得地方不好使用百分比,并且会导致变形,高度一般不好控制

  em: 相对定位 (会有影响发生变化) em=当前字体大小
缺点:会根据当前容器字体大小发生变化,假如每个容器字体大小不一致,那么计算会非常麻烦

  rem 
  r==root
  em=字体大小 font-size
  rem 相对单位
  只依赖于html字体大小

  动态的修改根元素的font-size:

  需要通过js去控制

  1. /*获得页面宽度后动态修改html上的fontsize
  2. * 320为iphone5设计稿下的页面宽度,如下设置后页面的页面在iphone5等宽屏幕上html
  3. * 的font-size会变为20px,即 1rem = 100px 1px=0.05rem
  4. * 所以设置元素尺寸的时候,如果测量设计稿 15px 则需设置尺寸为 (0.05*15)rem = 0.75rem
  5. */
  6.  
  7. !(function(doc, win) {
  8. var docEle = doc.documentElement,
  9. evt = "onorientationchange" in window ? "orientationchange" : "resize",
  10. fn = function() {
  11. var width = docEle.clientWidth;
  12. console.log(width)
  13. width && (docEle.style.fontSize = 20 * (width / 320) + "px");
  14. };
  15.  
  16. win.addEventListener(evt, fn, false);
  17. doc.addEventListener("DOMContentLoaded", fn, false);
  18.  
  19. }(document, window));

  将上面的文件引入到当前项目中,

  代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui">
  6. <title>移动端布局</title>
  7. <style type="text/css">
  8. *{
  9. padding: 0;
  10. margin: 0;
  11. }
  12. ul{
  13. list-style: none;
  14. }
  15. .clearfix:after{
  16. content: '';
  17. display: block;
  18. clear: both;
  19. }
  20. html{
  21. width: 100%;
  22. height: 100%;
  23. /*font-size: 30px;*/
  24. overflow: hidden;
  25. }
  26. body{
  27. width: 100%;
  28. height: 100%;
  29. overflow: auto;
  30. }
  31. .head-box{
  32. width: 100%;
  33. height: 4rem;
  34. background-color: red;
  35. position: absolute;
  36. top: 0;
  37. left: 0;
  38. }
  39. .list{
  40. margin-top: 4rem;
  41. font-size: 1.5rem;
  42. }
  43.  
  44. .list .item{
  45. float: left;
  46. width: 7rem;
  47. height: 7rem;
  48. border: 1px solid black;
  49. margin: 0.25rem;
  50.  
  51. }
  52.  
  53. </style>
  54. </head>
  55. <body>
  56.  
  57. <header class="head-box">
  58. <div class="head-top"></div>
  59. <div class="head-bottom"></div>
  60. </header>
  61.  
  62. <ul class="list clearfix">
  63. <li class="item">1111111</li>
  64. <li class="item"></li>
  65. <li class="item"></li>
  66. <li class="item"></li>
  67. <li class="item"></li>
  68. <li class="item"></li>
  69. <li class="item"></li>
  70. <li class="item"></li>
  71. </ul>
  72.  
  73. </body>
  74. <script src="./js/resize.js"></script>
  75. </html>

三丶Bootstrap学习

  详情请见 http://www.bootcss.com/

响应式及Bootstrap的更多相关文章

  1. 响应式布局 Bootstrap

    github介绍 (1)简单灵活可用于架构流行的 用户界面和交互接口 的html.css.javascript工具集 (2)基于html5.css3的bootstrap,具有大量的诱人特征: 友好的学 ...

  2. web响应式之bootstrap的基础用法。

    1/首先必须在head里面引用视窗viewport,以保证之后可以响应式分布 <!--meta:vp 响应式布局--> <meta name="viewport" ...

  3. 响应式框架Bootstrap

    概念:Bootstrap将会根据你的屏幕的大小来调整HTML元素的大小 -- 强调 响应式设计的概念. 通过响应式设计,你无需再为你的网站设计一个手机版的.它在任何尺寸的屏幕上看起来都会不错. Boo ...

  4. fcc 响应式框架Bootstrap 练习2

    text-primary 属性值使标题直接变成了红色,text-center使标题直接居中 <h2 class="text-primary  text-center"> ...

  5. 响应式与bootstrap

    一.单双击问题 <body> <button>按钮</button> <script src="./jQuery.js"></ ...

  6. 响应式布局 Bootstrap(01)

    1.是什么?Bootstrap,来自 Twitter,是目前最受欢迎的前端框架,Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷 Boot ...

  7. 10套免费的响应式布局 Bootstrap 模版

    1. Cardio Cardio是我最喜欢的一个轻量级模板.它几乎可以很少的修改的用于任何类型的业务. 2. Evento Evento 是一个事件引导广告模板的形状.它是设计精美和注意细节. 3. ...

  8. 响应式框架Bootstrap栅格系统

    <!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8&qu ...

  9. 响应式(2)——bootstrap的响应式

    <meta name="viewport" content="width=device-width,user-scalable=no"/> < ...

随机推荐

  1. 菜鸟级的Git与GitHub使用总结(转)

    菜鸟级的Git与GitHub使用总结 原创 2016年12月01日 14:58:30 1792 前言 这几天一直在折腾学习Git和GitHub的使用.几天下来,在网上查阅了大量的资料,总算有一些成果. ...

  2. 获取剪切板上DataFormats.Dib格式的文件

    if (formats.Contains(System.Windows.Forms.DataFormats.Dib)) { using (var img = System.Windows.Forms. ...

  3. Git删除master branch中最近一次的提交

    在做一个项目的过程中,需要删除master brach中最近一次的提交,需要在Git repository中删除 采用步骤如下: 1. 在Visual Studio中打开项目,进入到master br ...

  4. linux下sed批量替换文件内容

    在linux超级终端下编辑文档是件比较麻烦的事情,下面简单介绍一下如何在linux下批量替换文件内容 linuxsed 批量替换多个文件中的字符串 格式: sed -i "s/查找字段/替换 ...

  5. CSS概念 - 可视化格式模型(一) 盒模型与外边距叠加

    可以参考<精通CSS 高级WEB标准解决方案>第三章. 可视化格式模型 可视化格式模型要掌握的3个最重要的CSS概念是 浮动.定位.盒模型. 这些概念控制在页面上安排和显示元素的方式, 形 ...

  6. Android Market google play store帐号注册方法流程 及发布应用注意事项

    Android Market google play store帐号申请 注册方法流程 在 Google Play 中发布软件之前,您需要完成以下三项工作: 创建开发人员个人资料 接受开发人员分发协议 ...

  7. 微信小程序自学第三课:文件作用域,模块化

    一.文件作用域 在 JavaScript 文件中声明的变量和函数只在该文件中有效:不同的文件中可以声明相同名字的变量和函数,不会互相影响. 通过全局函数 getApp() 可以获取全局的应用实例,如果 ...

  8. 字符串中去除多余的空格保留一个(MS SQL Server)

    大约2年前,写过一篇<字符串中去除多余的空格保留一个(C#)>https://www.cnblogs.com/insus/p/7954151.html 今天,Insus.NET使用MS S ...

  9. restfull知识点

    网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备......).因此,必须有一种统一的机制,方便不同的前端设备与后端进行通信.这导致API ...

  10. BZOJ 1858【线段树】

    题意:  0 a b 把 [a, b] 区间内的所有数全变成0  1 a b 把 [a, b] 区间内的所有数全变成1  2 a b 把 [a,b] 区间内的所有数全部取反  3 a b 询问 [a, ...