响应式开发(3)
响应式开发(3)
sunnyGirl 发表于1年前
响应式开发(3)
  • 发表于 1年前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

标题:腾讯云 新注册用户域名抢购1元起>>>   

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

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

<link rel=“stylesheet”media=“screen and (min-width=800px)”href=“800width-screen.css”>

在响应式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>

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

 

共有 人打赏支持
粉丝 0
博文 9
码字总数 3863
×
sunnyGirl
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: