純CSS3使用vw和vh視口單位實現自適應-sass基礎-

transition transform 0.5s

transition主要包含四個屬性值

• 執行變換的屬性：transition-property
• 變換延續的時間：transition-duration
• 在延續時間段，
• 變換的速率變化transition-timing-function
• 變換延遲時間transition-delay。

	<style lang="stylus" scoped>
			.imgitem
	                position static
	                width 100%
	                height 100%
	                transition transform 0.5s
	</style>
			

css3 transform

旋轉、縮放、移動或傾斜
scaleX(1.1) 通過設置 X 軸的值來定義縮放轉換。
scaleY(0.5) 通過設置 Y 軸的值來定義縮放轉換。

視口自適應

在桌面端，視口指的是在桌面端，指的是瀏覽器的可視區域
而在移動端較爲複雜，它涉及到三個視口
分別是 Layout Viewport（佈局視口）、 Visual Viewport（視覺視口）、Ideal Viewport。

<style lang="scss" scoped>

  //純CSS3使用vw和vh視口單位實現自適應
  // rem 單位換算：定爲 75px 只是方便運算，750px-75px、640-64px、1080px-108px，如此類推
  $vm_fontsize: 75; // iPhone 6尺寸的根元素大小基準值
  @function rem($px) {
    @return ($px / $vm_fontsize ) * 1rem;
  }
  // body 也增加最大最小寬度限制，避免默認100%寬度的 block 元素跟隨 body 而過大過小
  body {
    max-width: 540px;
    min-width: 320px;
  }
  // 根元素大小使用 vw 單位
  $vm_design: 750;
  html {
    font-size: ($vm_fontsize / ($vm_design / 2)) * 100vw;
    // 同時，通過Media Queries 限制根元素最大最小值
    @media screen and (max-width: 320px) {
      font-size: 64px;
    }
    @media screen and (min-width: 540px) {
      font-size: 108px;
    }
  }


  //對於需要保持高寬比的圖，應改用 padding-top 實現
  .mod_banner{
    position: relative;
    padding-top: percentage(100/700); // 使用padding-top
    height: 0;
    overflow: hidden;
    img {
      width: 100%;
      height: auto;
      position: absolute;
      left: 0;
      top: 0;
    }
  }


  //物理像素線（也就是普通屏幕下 1px ，高清屏幕下 0.5px 的情況）
  .mod_grid{
    position: relative;
    &::after{
      position: absolute;
      top: 0;
      left: 0;
      content: '';
      pointer-events: none;
      background-color: #ddd;
      @media only screen and (-webkit-min-device-pixel-ratio: 2) {
        -webkit-transform: scaleY(0.5);
        -webkit-transform-origin: 50% 0%;
      }
    }
  }
  //iPhone 6尺寸作爲設計稿基準
  $vm_base: 375;
  @function vw($px){
    @return ($px /  $vm_base) * 100vw;
  }
  .mod_nav {
    &_list{
      padding: vw(15) vw(10) vw(10); // 內間距
      display: flex;
      &_item{
        font-size: vw(10); // 字體大小
        text-align: center;
        flex: 1;
      }
    }
  }

</style>