响应式布局开发——从入门到好使

最新推荐文章于 2024-08-28 23:30:23 发布

高谷深陵

最新推荐文章于 2024-08-28 23:30:23 发布

阅读量190

点赞数 1

分类专栏：前端文章标签：响应式布局开发实用好使

本文链接：https://blog.csdn.net/aasszzxxddff/article/details/103293585

版权

前端专栏收录该内容

3 篇文章 1 订阅

订阅专栏

1.什么是响应式布局开发
2.viewport属性

 <head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	    <!-- width=device-width：设置HTML页面的宽度和设备的宽度一致 -->
	    <!-- initial-scale：设置初始缩放比例1:1（不放大也不缩小）-->
        <!-- user-scaleable=no：禁止用户手动缩放 -->
	 </head>

<!-- 可参考<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->

3.@media媒体查询实现响应式布局开发

  @media screen and (max-width: 300px) {
        body {
           background-color:lightblue;
        }
     }

在这里插入图片描述

4.REM响应式布局开发
rem是相对单位，相对于当前页面根元素（HTML）的字体大小设定的，例如：HTML字体大小是20PX，此时1REM=20PX

步骤一：设置根字体大小

 html{
      font-size:100px;  //=>1rem=100px
      //=>设定的值需要方便后期计算，16这种值是不方便把PX转换为REM的计算的；10太小了，浏览器最小字体12（我们写10它也是按照12来算，这样会导致偏差）；
   }

步骤二：根据当前设备的宽度和原始设计稿的宽度做对比，动态改变REM换算比例

步骤三：严格按照设计稿的尺寸来编写样式，只不过所有的样式使用REM为单位

   .box1{
           width:1rem;//=>100px
           height:.57rem; 
           font-size:.28rem;
       }

注意：换算比根据根字体大小换算！！！
比如我设根字体大小为100px，所以换算比为1rem=100px

最佳实例

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>响应式布局</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <!-- REM -->
    <script>
        ~ function () {
            /**
             * computed:根据当前设备的宽度，动态计算出rem和px换算的比例
             */
            function computed() {
                //获取HtML元素
                let HTML = document.documentElement,
                    //获取当前设备的宽度
                    DEVIVE_WIDTH = HTML.clientWidth;
                //如果设备的宽度>=设计稿，我们则不再继续调整比例，按照设计稿大小来呈现即可
                if (DEVIVE_WIDTH >= 640) {
                    HTML.style.fontSize = '100px';
                    return;
                }
                //按照重新调整的HTML的字体大小（计算出rem和px最新的换算比例）
                HTML.style.fontSize = DEVIVE_WIDTH / 640 * 100 + 'px';
            }
            computed();
            //监听浏览器大小改变事件：大小一旦改变，则执行computed重新计算rem和px的换算比例
            window.addEventListener('resize', computed);
        }();
    </script>
</head>
<body>
</body>
</html>