App.vue 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <template>
  2. <div id="app">
  3. <router-view />
  4. </div>
  5. </template>
  6. <script>
  7. export default {
  8. name: "App",
  9. components: {},
  10. computed: {},
  11. };
  12. </script>
  13. <style lang="less">
  14. #app {
  15. font-family: "Avenir", Helvetica, Arial, sans-serif;
  16. -webkit-font-smoothing: antialiased;
  17. -moz-osx-font-smoothing: grayscale;
  18. text-align: center;
  19. color: #2c3e50;
  20. font-size: 32 / @rem;
  21. }
  22. // 正常横屏样式
  23. @media all and (orientation: landscape),
  24. /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px) {
  25. // 横屏最大高度
  26. // height: 260 / @rem;
  27. // overflow-y: auto;
  28. #app {
  29. font-size: 16 / @rem;
  30. }
  31. }
  32. // ipad 横屏
  33. @media /** 伪竖屏*/all and (orientation: portrait) and (min-width: 600px) and (min-height: 800px),
  34. /**ipad伪横屏 */ all and (orientation: landscape) and (min-width: 800px) and (min-height: 600px),
  35. all and (min-device-aspect-ratio: 3/4) and (max-device-aspect-ratio: 4/3),
  36. all and (device-aspect-ratio: 4/3) {
  37. #app {
  38. font-size: 16 / @rem;
  39. }
  40. }
  41. </style>