移动端布局

最新推荐文章于 2024-11-07 17:40:13 发布

m0_56305452

最新推荐文章于 2024-11-07 17:40:13 发布

阅读量88

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/m0_56305452/article/details/119393244

版权

一、网页标题图片的显示

语法：<link rel="shortcut icon" href="图片的地址" type="image/x-icon">

二、进行移动端页面布局时使用的单位

1、em：相对单位长度，如果本身未设置文字的大小，则相对于父级元素中设置的字体大小进行改变，如果，父级元素也没有设置，则逐级往上寻找，如果都没有，则根据浏览器默认的字体大小对长度进行设置

2、rem：相对单位长度，只是根据根元素设置的字体大小对长度进行设置

3、vw：设置视窗宽度的百分比，1vw等于视窗的1%

vh：设置视窗高度的百分比

vmin：vw和vh中较小的那一个

vmax：vw和vh中较大的那一个

三、以iPhone5为例做移动端的布局

图像像素为640px，在移动端布局中为320px时，总宽度为100vw，1vw=100/320*100 31.25px

练习：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
    <header>
        <span class="on">热点</span>
        <span>关注</span>
    </header>
    <nav>
        <span>足球现场</span>
        <span>足球生活</span>
        <span>足球美女</span>
    </nav>
    <section>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
        <figure>
            <img src="images/pic_03.jpg">
            <figcaption>小丸子啊小丸子</figcaption>
        </figure>
    </section>
    <footer>
        <div>
            <img src="images/(1).png">
            <span>首页</span>
        </div>
        <div>
            <img src="images/(3).png">
            <span>搜索</span>
        </div>
        <div>
            <img src="images/camera_03.png">
        </div>
        <div>
            <img src="images/(2).png">
            <span>我的</span>
        </div>
        <div>
            <img src="images/(4).png">
            <span>退出</span>
        </div>
    </footer>
</body>
</html>

css样式：

html{
    font-size: 31.25vw;
}
body{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
header{
    width: 100vw;
    height: 0.5rem;
    background: #0cc440;
    display: flex;
    justify-content: center;
    align-items: center;
}
header span{
    width: 1rem;
    height: 0.3rem;
    font-size: 50px;
    text-align: center;
    line-height: 0.3rem;
    margin: 0.1rem 0;
    background: #3dd066;
    color: #b1e4bb;
}
header span:nth-child(1){
    border-radius: 1rem 0 0 1rem;
}
.on{
    background: #63d985;
    color: #f2fff3;
}
header span:nth-child(2){
    border-radius: 0 1rem 1rem 0;  
}
nav{
    width: 100vw;
    height: 0.35rem;
    background: white;
    border: 1px solid gray;
    border-radius: 0 0 1px;
    display: flex;
}
nav span{
    width: 1.07rem;
    height: 0.35rem;
    font-size: 50px;
    text-align: center;
    line-height: 00.35rem;
}
section{
    width: 100vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow: auto;
}
figure{
    width: 48vw;
    margin-top: 0.2rem;
    border: 1px solid pink;
}
figure img{
    width: 100%;
}
figcaption{
    width: 100%;
    height: 0.4rem;
    line-height: 0.4rem;
    text-align: center;
    font-size: 50px;
}
footer{
    width: 100vw;
    height: 0.5rem;
    background: white;
    position: fixed;
    bottom: 0;
    font-size: 35px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    border: 1px solid gray;
    border-width: 1px 0 0;
}
footer div{
    width: 0.25rem;
    height: 0.4rem;
    text-align: center;
    color: #d5d5d5;
}
footer div:nth-child(1){
    color: #13c040;
}
footer img{
    width: 100%;
}
footer div:nth-child(3){
    width: 0.6rem;
    height: 0.6rem;
    align-self: flex-end;
}