注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

一起来玩转 Chrome —— 移动设备模拟(响应式调试)  

2015-05-03 01:29:04|  分类: 前端开发工具 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
测试的demo
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>梦幻雪冰</title>
  6.     <link rel="stylesheet" href="css/reset.css">
  7.     <meta name="viewport" content="width=device-width,user-scalable=no">
  8.     <style>
  9.         .wrap {
  10.             width: 100%;
  11.             height: 50px;
  12.             line-height: 50px;
  13.             text-align:center;
  14.         }
  15.         /*当device width小于320px的时候加载该样式*/
  16.         @media screen and (max-width: 320px){
  17.             .wrap {
  18.                 background-color: #eee;
  19.             }
  20.         }
  21.         /*当device width大于320px小于480px的时候加载该样式*/
  22.         @media screen and (min-width: 320px) and (max-width: 480px){
  23.             .wrap {
  24.                 background-color: green;
  25.             }
  26.         }
  27.         /*当device width大于480px小于640px的时候加载该样式*/
  28.         @media screen and (min-width: 480px) and (max-width: 640px){
  29.             .wrap {
  30.                 height: 70px;
  31.                 background-color: yellow;
  32.                 line-height: 70px;
  33.             }
  34.         }
  35.         /*当device width大于640px的时候加载该样式*/
  36.         @media screen and (min-width: 640px){
  37.             .wrap {
  38.                 height: 100px;
  39.                 background: skyblue;
  40.                 line-height-color: 100px;
  41.             }
  42.         }
  43.     </style>
  44. </head>
  45. <body>
  46.     <div class="wrap">梦幻雪冰、独行冰海</div>
  47.     <script></script>
  48. </body>
  49. </html>

第一:打开Chrome,按F12
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰

第二:点击“手机”小图标
 一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰

显示手机调试页面
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰

第三:设备的设置 
 模拟设备列表中包含了50多种类型的设备(苹果、谷歌、三星等),你可以选择不同类型的设备进行测试。
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰

注意:上面的黄线,它将要求您重新加载页面。
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰

第四:模拟缩放
注意:需要比较新的Chrome才能支持,并且viewport里面user-scalable=yes才能进行模拟缩放(禁止缩放就模拟不了)。
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰
 
第五:媒体查询
点击左上角的按钮(红色框选中的那个按钮)
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰

出现媒体查询调试界面
注意:测试的例子中书写了320、480、640断点
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰

点击根据断点生成的区间
点击其中一个,网页会立即重新调节(网页显示480~640中的样式)
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰

如果你做一个鼠标右键单击某一个,可以导航到其CSS样式中
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰
 
第六:点击更多
在网络旁边注意三个点(更多的意思)
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰

如果你点击它们,开发工具将打开仿真界面,可以选择更多的配置
例如,您可以设置传感器的参数不同,设置一个地理位置的纬度和经度或一组角加速度计。
一起来玩转 Chrome —— 移动设备模拟(响应式调试) - 梦幻雪冰 - 梦幻雪冰
 


欢迎学习交流——梦幻雪冰独行冰海@font-face中iefix的详解 - 梦幻雪冰 - 梦幻雪冰
梦幻雪冰微博——梦幻雪冰
HTML5学堂贴吧——HTML5学堂
HTML5学堂微博——HTML5学堂
HTML5学堂官网——HTML5学堂
HTML5学堂微信
setInterval和setTimeout参数剖析 - 梦幻雪冰 - 梦幻雪冰
  评论这张
 
阅读(55)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017