响应式开发

**

第一步： 添加 viewport meta 标签

**
在head标签内添加 viewport meta标签

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

第二步：使用 Media Queries

目的：为不同特性的浏览器视窗使用不同的样式代码

image.png

使用的2种方法
image.png

样式断点
Media Queries所使用的查询参数的临界值可以称为 样式断点

重要技巧：

  • 依据目标设备的分辨率，制定合适的断点，并为不同的断点定制必要的css样式
  • 移动端优先的页面，可以使用min-width查询参数从小到大来定义断点

**
image.png

示例网站：

第三步：使用viewport 单位 以及 rem

demo
https://jdc.jd.com/demo/ting/vw_layout.html#

1.仅使用vw作为css长度单位

2.vw 搭配 rem

rem核心：根据视窗大小变化动态改变根元素字体大小

image.png

  1. scss 语法 
  3. /* 
  4.     rem单位换算 750px-75px  640px-64px
  5. */
  6. $vw_fontsize:75; //iphone6 尺寸的根元素大小基准值
  7. @function rem($px){
  8.     @return ($px / $vw_fontsize) * 1rem
  9. }
  11. /* 
  12.     根元素大小使用 vw 单位
  13.  */
  14. @vw_design: 750;
  15. html {
  16.     font-size:($vw_fontsize / ($vw_design/2)) * 100vw
  17.     //通过 Media Queries 限制根元素最大最小值
  18.     @media screen and (max-width:320px){
  19.         font-size:64px
  20.     }
  21.     @media screen and (min-width:540px){
  22.         font-size:108px
  23.     }
  24. }
  26. /* 
  27.     body也增加最大最小宽度限制，避免默认100%宽度的block元素跟随body过大过小
  28.  */
  29.  body{
  30.      max-width: 540px;
  31.      min-width: 320px;
  32.  }

滑屏应用开发

主流滑屏组件 （如Swiper）

中文网站
https://www.swiper.com.cn/

swiper 实践
文档 

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8.     <!-- cdn 加载可能不稳定 -->
  9.     <link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css">
  10.     <script src="https://unpkg.com/swiper/js/swiper.js"> </script>
  11.     <style>
  12.         .swiper-container {
  13.             width: 600px;
  14.             height: 300px;
  15.             background: blanchedalmond;
  16.         }
  17.     </style>
  18. </head>
  20. <body>
  21.     <div class="swiper-container">
  22.         <div class="swiper-wrapper">
  23.             <div class="swiper-slide">1</div>
  24.             <div class="swiper-slide">2</div>
  25.             <div class="swiper-slide">3</div>
  26.         </div>
  27.         <!-- 分页器 -->
  28.         <div class="swiper-pagination"></div>
  29.     </div>
  31.     <!-- 初始化最好是挨着 </body> 标签 -->
  32.     <script>
  33.         var mySwiper = new Swiper('.swiper-container',{
  34.             direction:'vertical', //垂直切换选项
  35.             loop:true, //循环模式
  36.             //是否需要分页器
  37.             pagination:{
  38.                 el:'.swiper-pagination'
  39.             }
  40.         })
  41.     </script>
  43.     <!-- 或者需要 window.onload = function(){} -->
  44. </body>
  46. </html>

核心 手势判断

  • 判断用户的手势动作
  • 根据手势动作执行相应滑屏过渡动画

https://hammerjs.github.io/
中文文档 https://xinyufeng.net/cnhammerjs/getting-started/

滑屏过渡动画

html5 + swiper 快速生成
https://github.com/o2team/elf