99国产欧美久久久精品蜜臀|精品无码久久久久久久久久|亚洲国产日韩欧美一区综合|国产亚洲欧洲综合5388

<track id="jjz3x"></track>

            <menuitem id="jjz3x"><dfn id="jjz3x"><thead id="jjz3x"></thead></dfn></menuitem><bdo id="jjz3x"><optgroup id="jjz3x"></optgroup></bdo><track id="jjz3x"></track>
            <nobr id="jjz3x"><optgroup id="jjz3x"></optgroup></nobr>
          1. 咨詢電話:
            15628812133
            07
            2023/07

            移動端適配

            發布時間:2023-07-07 17:51:16
            發布者:文章機器人
            瀏覽量:
            0

            魯迅曾經說過:竊代碼不能算偷……竊代碼!……程序員的事,能算偷么!

            最近有個項目需要做移動端,想起來以前uncle對我說過,移動端需要對不同的手機做適配,所以不能單純用px,很久以前的移動端適配是使用的媒體查詢。

            @media screen and (max-width: 300px){} 最大寬度300像素需要的樣式。

            后來移動端興起,為每一個都做一個適配不合理,所以需要做響應式rem布局。

            rem單位都是相對于根元素html的font-size來決定大小。

            因此,如果通過rem來實現響應式的布局,只需要根據視圖容器的大小,動態的改變font-size即可(而em是相對于父元素的)。

            這里可以使用js來讀取頁面大小。

            貼一下uncle的代碼。

            function fontRem() {
                var bodyWidth = document.getElementsByTagName("body")[0].clientWidth;
                var htmlWidth = document.getElementsByTagName('html')[0];
                var fontSize = bodyWidth / 375;
                htmlWidth.style.fontSize = fontSize + "px";
            }
            fontRem()
              // 改變窗口大小時重新設置 rem
            window.onresize = function(){
            fontRem();
            }

            介紹一下代碼,375就是設計圖的寬度,實際頁面尺寸 1px = 1rem。

            看一下例子,這里設計圖寬度是375,這里我們設置寬度為250rem 和 375rem.可以看到,當寬度為375rem時,并沒有出現x軸的滾動條,所以剛剛好鋪滿。

            因為需要拿到body和html這兩個標簽,所以需要放到body外面的位置。

            屏幕截圖(88).png


            返回列表

            <track id="jjz3x"></track>

                      <menuitem id="jjz3x"><dfn id="jjz3x"><thead id="jjz3x"></thead></dfn></menuitem><bdo id="jjz3x"><optgroup id="jjz3x"></optgroup></bdo><track id="jjz3x"></track>
                      <nobr id="jjz3x"><optgroup id="jjz3x"></optgroup></nobr>