H5 CSS rem+vw应用移动端

最新推荐文章于 2023-03-23 17:59:05 发布

攻城狮们好

最新推荐文章于 2023-03-23 17:59:05 发布

阅读量277

点赞数 1

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/weixin_46685112/article/details/107735556

版权

什么是rem?
如果说我们给html设置的font-size值为16px；那么16px1=1rem;
如果说我们给html设置的font-size值为50px；那么50px1=1rem;
什么是vw?
把一个窗口或者页面的总宽度分为100份，每一份就是1
以iphone6为基准，屏幕宽度为375px；
换算成vw 1vw=3.75px;
使用rem给html的font-size设置大小为100px，那么1rem就等于100px;即屏幕可放3.75个字体；
即100vw的宽度可以放置3.75个字体，那么一个字的大小就相当于26.66666666vw;也就是说1rem=26.666666vw;
此时表面看来html的font-size被设置为26.666666vw;但实际HTML的font-size为100px,
1rem=100px;
如果说我们拿到的设计图纸时375px的话，那我们就可以直接写测量到的模块宽高值；但是呢
？我们拿到的设计图一般为750px;,图纸上的2px相当于iphone的1px;
例如，当我们量的设计图中的div宽度为46px时；我们需要写入23px;这就需要我们没的一个值都要除以2；很麻烦；
所以呢，我们就可以直接在设置html字体的时候直接将原来的字体大小除以2；这样一来当我们拿到750px的设计图时，在写div宽度就不需要除以2了；

移动端结构html代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/kuangjia.css">
    <link rel="stylesheet" href="css/reset.css">
</head>
<body>
    <header></header>
    <section>

        
                    <!-- 两栏式布局 -->
        <!-- <ul class="nav">
            <li>时尚</li><li>时尚</li><li>时尚</li><li>时尚</li><li>时尚</li><li>时尚</li><li>时尚</li><li>时尚</li><li>时尚</li><li>时尚</li>
        </ul>
        <aside class="main">
            <div>女装</div><div>女装</div><div>女装</div><div>女装</div><div>女装</div><div>女装</div><div>女装</div><div>女装</div><div>女装</div><div>女装</div>
        </aside> -->
         </section>
    <footer>
        <figure><span></span><figcaption></figcaption></figure>
        <figure><span></span><figcaption></figcaption></figure>
        <figure><span></span><figcaption></figcaption></figure>
        <figure><span></span><figcaption></figcaption></figure>
        <figure><span></span><figcaption></figcaption></figure>
    </footer>
</body>
</html>

移动端框架css代码如下：

html,body{
    height: 100%;
}
html{
    font-size: 13.3333333vw;
}
body{
    display: flex;
    flex-direction: column;
}


header{
    height: 1.5rem;
    background-color: rgb(189, 228, 145);
}

section{
    flex: 1;
    background-color:rgb(240, 229, 229);
    overflow-y: auto;
}

/* 两栏布局 */
/* 两栏布局 */
/* section{
    display: flex;
}
.nav{
    width: 2rem;
    background-color: blanchedalmond;
    overflow-y: auto;
}
.main{
    flex: 1;
    background-color: wheat;
    overflow-y: auto;
} */

/* 两栏布局 */
/* 两栏布局 */


footer{
    height: 1.5rem;
    background-color: rgba(210, 240, 161, 0.329);
    display: flex;
    justify-content: space-between;

}
footer figure{
    width: 1rem;
    border: 1px black solid;
}

攻城狮们好

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5 CSS rem+vw应用移动端

什么是rem?如果说我们给html设置的font-size值为16px；那么16px1=1rem;如果说我们给html设置的font-size值为50px；那么50px1=1rem;什么是vw?把一个窗口或者页面的总宽度分为100份，每一份就是1以iphone6为基准，屏幕宽度为375px；换算成vw 1vw=3.75px;使用rem给html的font-size设置大小为100px，那么1rem就等于100px;即屏幕可放3.75个字体；即100vw的宽度可以放置3.75个字体，那么
复制链接

扫一扫