响应式开发（3）

最新推荐文章于 2019-05-04 21:07:00 发布

chuikuap54896

最新推荐文章于 2019-05-04 21:07:00 发布

阅读量88

点赞数

原文链接：https://my.oschina.net/u/3082859/blog/796886

版权

在这里我想写下另外一种方法，其实这些都是基础的知识，可我是初学，所以还是选择一点点积累。

限制只有视口宽度大于800px，才会加载这个文件

在响应式web设计一书中，作者写到，流式布局就是将传统的固定布局转化成百分比布局，（我不知道以前的表格布局是采用百分比还是固定的，不是很了解，但是根据作者说的好像是采用百分比布局，现在算是回归到以前的布局方式了吗），这里有一个公式。

目标元素宽度%上下文元素宽度=百分比宽度

对了，还有一点就是关于px，em和rem之间的换算。16px=1em 16px=1.6rem

我勒个去，我还真是不知道媒体查询怎么用的，也没有怎么去研究，头都大啊，因为设置的东西没有效果啊。

<style>
       @media screen and (min-width: 900px) and (max-width: 1080px){
           #para p{
               font-size: 2.5rem;
           }
       }
       @media screen and (min-width: 800px) and (max-width: 900px){
           #para p{
               font-size: 2.2rem;
           }
       }
        @media screen and (min-width: 700px) and (max-width: 800px){
            #para p{
                font-size:1.8rem ;
            }
        }

    </style>
</head>
<body>
<div id="para">
    <p>十年生死两茫茫，不思量，自难忘</p>
    <p>衣带渐宽终不悔，为尹消得人憔悴</p>
</div>

</body>

根据视口的宽度来调节文字的大小，如果视口的范围超出所规定的的媒体查询的范围，字体大小会自动变成默认的，同样当视口的宽度小于所规定的范围，字体大小也会变成默认的。

转载于:https://my.oschina.net/u/3082859/blog/796886