鸩羽千夜

08mobild.md

goer ... 2022-01-05 Css
  • Css
 小于 1 分钟
移动端布局

[toc]

# 移动端布局

移动端：手机端页面，终端屏幕小

  1. js文件夹

    // common.js
// 看不懂没关系，还没学嘛

//布局js
function resize() {
    let width = window.screen.width;
 	//这里需要该偶   
    const basicvalue = 1024; //设计稿上的分辨率大小
    
    //放大100倍，为了方便计算rem大小
    document.documentElement.style.fontSize = (width / basicvalue) * 100 + 'px';
}

//加上以下代码是为了切换设备时能时刻刷新动态fontSize，从而得到正确的布局
window.addEventListener('resize', function () {
    resize();
});
window.addEventListener('DOMContentLoaded', function () {
   resize();
});
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21

  2. css文件夹

    // conmon.css 这个不用多说了吧
/*媒体查询*/
html{
   font-size: 100px;
}

@media only screen and (min-device-width:320px) and (max-device-height:568px){
   html{
      font-size: 42.6667px;
   }
}
@media only screen and (min-device-width:375px) and (-webkit-min-device-pixel-ratio:2){
   html{
      font-size: 50px;
   }
}
@media only screen and (min-device-width:412px) and (-webkit-min-device-pixel-ratio:3){
   html{
      font-size: 55.2px;
   }
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22

  3. HTML —> 视口

    <!-- 在html文件头部加上 适配移动端--> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

device-width  设备宽度
initial-scale 默认缩放比例
maximum-scale 最大缩放比例
user-scalable 是否允许用户缩放,0不允许
    1
    2
    3
    4
    5
    6
    7

09bootstrap.md