作业内容：

  1. 总结出移动端布局的基本思路与三种视口之间的关系
  2. 实战手机页面的基本整体架构:页眉,页脚,主体等

1、移动端布局

1、通过设置viewport缩放来实现
2、通过rem相对单位来实现
DPR、rem都用到缩放因子来解决问题

2、rem与px详解

step1比较

step2查看

step3异常

step4优化

step5检查

实战作业

  1. /* 样式重置 */
  3. * {
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. /* 链接 */
  10. a {
  11.     text-decoration: none;
  12.     color: #555;
  13. }
  14. html {
  15.     font-size: calc(100vw / 3.75);
  16. }
  17. body {
  18.     font-size: 0.12rem;
  19.     background-color:#f4f4f4;
  20.     display: grid;
  21.     /* grid-template-rows: repeat(3,1fr); */
  22. }
  23. header{
  24.     display: grid;
  25. }
  26. header .head{
  27.     display: grid;
  28.     grid-template-columns: .4rem 1fr;
  29.     place-items: center;
  30.     width: 100vw;
  31.     background-color: tomato;
  32.     position: fixed;
  33.     top: 0;
  34.     left: 0;
  35. }
  36. header .head .tb{
  37.     margin: .05rem;
  38.     margin-left: .1rem;
  39.     font-size: .28rem;
  40.     color: white;
  41. }
  42. header .placeholder{
  43.     background-color: white;
  44.     width: 3.2rem;
  45.     height: .25rem;
  46.     border-radius: .05rem;
  47.     border: none;
  48.     text-align: center;
  49. }
  50. header .img1{
  51.     width: 100%;
  52.     height: 100%;
  53.     grid-column: span 2;
  54.     margin-top: .37rem;
  55. }
  56. header .navs{
  57.     background-color: white;
  58.     grid-column: span 2;
  59.     display: grid;
  60.     grid-template-columns: repeat(5,1fr);
  61.     place-items: center;
  62.     padding: .1rem;
  63. }
  64. header .navs .nav{
  65.     text-align: center;
  66.     padding: .05rem;
  67.     font-size: .1rem;
  68. }
  69. header .navs .nav img{
  70.     width: 100%;
  71. }
  72. main{
  73.     background-color: white;
  74.     border-radius: .1rem;
  75.     margin: .1rem;
  76.     padding: .1rem;
  77. }
  78. main .list1{
  79.     display: grid;
  80.     grid-template-columns: repeat(4,1fr);
  81. }
  82. main .list1 .box{
  83.     display: grid;
  84.     padding: .05rem;
  85. }
  86. main .list1 .box .desc1{
  87.     font-size: .16rem;
  88.     font-weight: bolder;
  89. }
  90. main .list1 .box .desc2{
  91.     font-weight: bold;
  92.     font-size: .14rem;
  93.     color: rgb(197, 73, 36);
  94. }
  95. main .list1 .box .content{
  96.     padding: .05rem;
  97.     border-radius: .1rem;
  98.     display: grid;
  99.     background-color: rgb(253, 242, 239);
  100. }
  101. main .list1 .box div img{
  102.     width: 100%;
  103. }

更多相关文章

  1. Android实现对imageview的拖动以及缩放
  2. Android通过手势实现的缩放处理
  3. android 图形开发实例
  4. Android(安卓)--- 图片的特效处理
  5. css-grid布局实战-选做作业
  6. android:动态缩放和旋转图像
  7. Emmet插件使用和HTML知识及课程表作业
  8. Emmet插件使用和HTML知识及课程表作业
  9. Android(安卓)利用ScaleDrawable实现缩放

随机推荐

  1. android tv-TV Apps Checklist
  2. android 串口编程
  3. Android LIstView简单实现
  4. Android PopupWindow简单使用
  5. FaceBook,Twitter 相关网站记录
  6. Android中携带数据跳转Activity
  7. Android四大基本组件-Service详解
  8. Android：Getting Started with Android St
  9. android 阅读器
  10. Android强制联网