实现移动端不同屏幕适配

已于 2023-02-02 13:37:28 修改
阅读量172 收藏 1
点赞数 1
文章标签： css3 css
于 2022-04-29 00:03:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46131187/article/details/124486366
版权

               静态页面，学习目标是实现移动端不同屏幕适配

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0 ,maximum-scale=1.0,minimum-scale=1.0, user-scalable=no">
    <title>益康问答</title>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 头部部分 -->
    <header>
        <a href="#"><span></span>返回</a>
        <span>益康问答</span>
        <a href="#"></a>
    </header>
    <!-- 导航栏部分 -->
    <div class="nav">
        <div>问题榜</div>
        <div></div>
        <div>新晋榜</div>
        <div></div>
        <div>才华榜</div>
    </div>
    <!-- 轮播图部分 -->
    <div class="banner">
        <img src="./images/banner.jpg" alt="">
    </div>

    <!-- 内容部分 -->
    <div class="mid_con">
        <p>如何学习语文的文言文内容,快速提高语文成
            绩？</p>
        <div>
            <span>王知易</span>
            <span>英语文学语言老师</span>
        </div>
        <div>
            <span></span>
            <span>限时免费听</span>
            <span>22人听过</span>
        </div>
    </div>
    <div class="mid_con">
        <p>如何学习语文的文言文内容,快速提高语文成
            绩？</p>
        <div>
            <span>王知易</span>
            <span>英语文学语言老师</span>
        </div>
        <div>
            <span></span>
            <span>限时免费听</span>
            <span>22人听过</span>
        </div>
    </div>
    <div class="mid_con">
        <p>如何学习语文的文言文内容,快速提高语文成
            绩？</p>
        <div>
            <span>王知易</span>
            <span>英语文学语言老师</span>
        </div>
        <div>
            <span></span>
            <span>限时免费听</span>
            <span>22人听过</span>
        </div>
    </div>
    <div class="mid_con">
        <p>如何学习语文的文言文内容,快速提高语文成
            绩？</p>
        <div>
            <span>王知易</span>
            <span>英语文学语言老师</span>
        </div>
        <div>
            <span></span>
            <span>限时免费听</span>
            <span>22人听过</span>
        </div>
    </div>


    <!-- 底部导航部分 -->
    <div class="foots">
        <div>榜单</div>
        <div>收听</div>
        <div>发现</div>
        <div>我的</div>
    </div>
</body>

</html>

CSS(less)

//引入公共样式
@import url(./common.less);

//字体声明
@font-face {
    font-family: 'icomoon';
    src: url('../fonts/icomoon.eot?tomleg');
    src: url('../fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'),
        url('../fonts/icomoon.ttf?tomleg') format('truetype'),
        url('../fonts/icomoon.woff?tomleg') format('woff'),
        url('../fonts/icomoon.svg?tomleg#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

// 根据设计稿设置基础字体大小
@basefont: 42.66666667px;

// body初始化
body {
    min-width: (320rem / @basefont);
    width: 15rem;
    margin: 0 auto;
    font-family: 'Times New Roman', Times, serif;
    background-color: #ebebeb;
    font-size: (26rem / @basefont);
}

// 头部部分
header {
    display: flex;
    justify-content: space-between;
    font-family: 'icomoon';
    background-color: #44b181;
    width: 15rem;
    height: (80rem / @basefont);
    margin: 0 auto;
    text-align: center;
    line-height: (80rem / @basefont);
    padding: 0 (20rem / @basefont);
    position: fixed;
    top: 0;
    z-index: 1;

    a {
        color: #fff;

        &:nth-child(1) {
            position: relative;
            padding-left: (25rem / @basefont);
            font-size: (27rem / @basefont);

            span {
                position: absolute;
                top: (3rem / @basefont);
                left: (-15rem / @basefont);
                font-size: (50rem / @basefont);
            }
        }

        &:nth-child(3) {
            width: (52rem / @basefont);
            height: (12rem / @basefont);
            padding: (40rem / @basefont) 0;
            background: url(../images/more_icon.png) no-repeat center center;
            background-size: (52rem / @basefont) auto;
        }
    }

    >span {
        flex: 1;
        color: #fff;
        font-size: (38rem / @basefont);
    }
}

//导航栏部分
.nav {
    display: flex;
    padding: (28rem / @basefont) (20rem / @basefont) 0;
    // margin-bottom: (28rem / @basefont) ;
    height: (87rem / @basefont);
    width: 15rem;
    background-color: #fff;
    text-align: center;
    position: fixed;
    top: (80rem / @basefont);
    z-index: 1;

    >div {
        color: #000;

        &:nth-child(2n+1) {
            flex: 1;
            padding-bottom: (28rem / @basefont);
        }

        &:nth-child(1) {
            color: #44b181;
            border-bottom: (2rem / @basefont) solid #44b181;
        }

        &:nth-child(2n) {
            border-right: 1px solid #e1e1e1;
            height: (24rem / @basefont);
        }

        &:nth-child(5) {
            position: relative;
        }

        &:nth-child(5)::after {
            position: absolute;
            right: 0;
            top: 0;
            height: (33rem / @basefont);
            width: (33rem / @basefont);
            background-color: pink;
            content: '';
            display: table;
            background: url(../images/sprites.png) no-repeat 0 0;
            background-size: (289rem / @basefont) auto;
        }
    }
}

//轮播图部分

.banner {
    height: (300rem / @basefont);
    width: 15rem;

    img {
        width: 100%;
    }
}

// 内容部分
.mid_con {
    margin-top: (20rem / @basefont);
    height: (253rem / @basefont);
    background-color: #fff;
    padding: (20rem / @basefont);

    p {
        width: (537rem / @basefont);
        font-size: (26rem / @basefont);
        font-weight: 700;
        margin-bottom: (20rem / @basefont);
    }

    div {
        &:nth-child(2) {
            font-size: (20rem / @basefont);
            color: #999;
            margin-bottom: (30rem / @basefont);

            span {
                &:first-child {
                    padding-right: (20rem / @basefont);
                    margin-right: (20rem / @basefont);
                    border-right: 1px solid #666;
                }
            }
        }

        &:nth-child(3) {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            height: (80rem / @basefont);

            span {
                &:nth-child(1) {
                    display: inline-block;
                    width: (80rem / @basefont);
                    height: (80rem / @basefont);
                    background: url(../images/tou.png) no-repeat;
                    background-size: (80rem / @basefont) auto;
                    margin-right: 30px;
                }

                &:nth-child(2) {
                    display: inline-block;
                    width: (289rem / @basefont);
                    height: (60rem / @basefont);
                    background: url(../images/sprites.png) no-repeat 0px (-56rem / @basefont);
                    background-size: (400rem / @basefont) auto;
                    line-height: (60rem / @basefont);
                    color: #fff;
                    padding-left: (55rem / @basefont);
                    flex: 1;
                    position: relative;
                }

                &:nth-child(2)::before {
                    content: '';
                    display: table;
                    width: (20rem / @basefont);
                    height: (28rem / @basefont);
                    background: url(../images/sprites.png) no-repeat (-110rem / @basefont) 0;
                    background-size: (400rem / @basefont) auto;
                    position: absolute;
                    left: (20rem / @basefont);
                    top: (15rem / @basefont);
                }

                &:nth-child(3) {
                    color: #999999;
                    font-size: (20rem / @basefont);
                    position: relative;
                }

                &:nth-child(3)::before {
                    content: '';
                    display: table;
                    width: (24rem / @basefont);
                    height: (21rem / @basefont);
                    background: url(../images/sprites.png) no-repeat (-64rem / @basefont) 0;
                    background-size: (400rem / @basefont) auto;
                    position: absolute;
                    top: (0rem / @basefont);
                    left: (-30rem / @basefont);
                }
            }
        }
    }
}

// 底部导航部分

.foots {
    position: fixed;
    bottom: 0;
    display: flex;
    z-index: 1;
    background-color: #f5f7f9;
    height: (100rem / @basefont);
    text-align: center;

    div {
        flex: 1;
        width: (160rem / @basefont);
        position: relative;
        padding-top: (60rem / @basefont);

        &:nth-child(1) {
            color: #44b181;
        }

        &:nth-child(1)::before {
            content: '';
            display: table;
            width: (32rem / @basefont);
            height: (27rem / @basefont);
            background: url(../images/sprites.png) no-repeat (-1rem / @basefont) (-140rem / @basefont);
            background-size: (400rem / @basefont) auto;
            position: absolute;
            left: (64rem / @basefont);
            top: (18rem / @basefont);
        }

        &:nth-child(2)::before {
            content: '';
            display: table;
            width: (34rem / @basefont);
            height: (27rem / @basefont);
            background: url(../images/sprites.png) no-repeat (-35rem / @basefont) (-140rem / @basefont);
            background-size: (400rem / @basefont) auto;
            position: absolute;
            left: (64rem / @basefont);
            top: (18rem / @basefont);
        }

        &:nth-child(3)::before {
            content: '';
            display: table;
            width: (32rem / @basefont);
            height: (32rem / @basefont);
            background: url(../images/sprites.png) no-repeat (-71rem / @basefont) (-137rem / @basefont);
            background-size: (400rem / @basefont) auto;
            position: absolute;
            left: (64rem / @basefont);
            top: (18rem / @basefont);
        }

        &:nth-child(4)::before {
            content: '';
            display: table;
            width: (30rem / @basefont);
            height: (33rem / @basefont);
            background: url(../images/sprites.png) no-repeat (-107rem / @basefont) (-137rem / @basefont);
            background-size: (400rem / @basefont) auto;
            position: absolute;
            left: (64rem / @basefont);
            top: (18rem / @basefont);
        }

    }
}

公共样式

a {
    text-decoration: none;
  }
input {
    outline: 0;
    vertical-align: middle;
    -webkit-appearance: none;
}
a,img,input {
    -webkit-touch-callout: none;
}
ul li {
    list-style: none;
}
img {
    border: 0px;
    vertical-align: middle;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

  html {
    font-size: 50px;
  }
  @num:15;
  //320px
  @media screen and (min-width:320px) {
      html {
          font-size: (320px / @num);
      }
  }
  //360px
  @media screen and (min-width:360px) {
      html {
          font-size: (360px / @num);
      }
  }
  //375px
  @media screen and (min-width:375px) {
      html {
          font-size: (375px / @num);
      }
  }
  //384px
  @media screen and (min-width:384px) {
      html {
          font-size: (384px / @num);
      }
  }
  //400px
  @media screen and (min-width:400px) {
      html {
          font-size: (400px / @num);
      }
  }
  //414px
  @media screen and (min-width:414px) {
      html {
          font-size: (414px / @num);
      }
  }
  //424px
  @media screen and (min-width:424px) {
      html {
          font-size: (424px / @num);
      }
  }
  //480px
  @media screen and (min-width:480px) {
      html {
          font-size: (480px / @num);
      }
  }
  // 540px
  @media screen and (min-width:540px) {
      html {
          font-size: (540px / @num);
      }
  }
    // 640px
    @media screen and (min-width:640px) {
      html {
          font-size: (640px / @num);
      }
  }
  // 720px
  @media screen and (min-width:720px) {
      html {
          font-size: (720px / @num);
      }
  }
  //750px
  @media screen and (min-width:750px) {
      html {
          font-size: (750px / @num);
  
      }
  }

知道小雨一直在改变
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue使用rem实现 移动端屏幕适配
10-17
主要介绍了vue使用rem实现 移动端屏幕适配的相关知识，通过实例代码介绍了vue用rem布局的实现代码,需要的朋友可以参考下
【移动端元素按比例缩放】用Padding-buttom撑开高度
劲枫的博客
06-28 2370
 1、在说容器按比例缩放前，我们先说下图片按比例缩放。 对于图片，默认只设置图片的一个宽或高，那么另一个值就会按照图片真实比例缩放。 图片因为本身存在宽高比，所以设置一个值，另一个值自动也就根据真实的比例对应上，但是如果是视频、div元素等元素则没有这个属性。 一般在响应式中，我们会要求视频、或者一些图表、一些块元素的宽高比为16：9或4：3，这么一来就比较头大了。当用户改变浏览器宽度的时候...
让padding、border等不占据宽度（手机端，pc端）
xiasohuai的博客
11-10 1951
box-sizing属性可以为三个值之一：content-box（default），border-box，padding-box。 content-box，border和padding不计算入width之内（默认属性） padding-box，padding计算入width内 border-box，border和padding计算入width之内，其实就是怪异模式了。   我们经常遇到以下...
移动端怎么适配顶部跟底部的安全区域
weixin_48723799的博客
03-11 3136
通常来说，IOS 设备在页面顶部和底部都会预留出一定的安全区域，底部安全区域的高度和设备尺寸、系统版本等相关，一般在 34~44px 之间。而 Android 设备在页面顶部通常不需要预留出安全区域，但在底部有导航栏时需要预留出相应的安全区域。在 HTML 的 head 标签中添加 viewport meta 标签，以适配不同设备的屏幕大小，并启用安全区域填充模式。移动端适配顶部底部的安全区域，是为了保证页面在 IOS 和 Android 系统下的显示效果和用户体验。表示页面宽度等于设备宽度，
微信小程序适配iphoneX，XR，12等机型的底部安全区域
weixin_41847305的博客
08-09 2881
为了适配所有的手机机型，需要获取到底部小黑条的高度，给固定在底部的view设置padding-bottom，增加高度；（有些手机默认是没有底部这个区域的，没有的话padding-bottom就设置为0）
移动端屏幕适配的三种方法
weixin_46022934的博客
11-14 5766
移动端的三种适配方法 提示：移动端的三种适配方法 文章目录移动端的三种适配方法一、移动端为什么要适配？？二、适配的原理1.适配的原理2.适配方案方案如下一 :利用网易的适配方案使用vw作为单位，不用写js，只需要方案如下二 : 通过js动态的获取屏幕的宽度,然后自计算底层字体的大小,并修改字体.原理与第一种方案相同 (代码如下)适配方案三:通过CSS的用法(媒体查询), 一、移动端为什么要适配？？ 一: 为了让页面在不同屏幕尺寸下兼容运行，字体/元素的大小等能够动态 变化 二、适配的原理 1.适
CSS像素以及移动端不同屏幕适配问题解决
11-21
解决移动端屏幕适配的一个常见方法是使用相对单位，如rem（root em）。rem单位基于根元素（通常是html元素）的字体大小来计算，可以方便地调整整个页面的比例。例如，若设计稿宽度为750px，并且规定1rem=100px，实际...
vue移动端屏幕适配详解
10-17
Vue.js作为一款流行的前端框架，提供了多种方法来实现移动端屏幕适配。本文将详细讲解如何在Vue项目中进行移动端屏幕适配。 首先，我们需要了解移动端屏幕适配的基本原理。通常，适配策略基于设计稿的宽度，例如...
html5实现移动端适配完美写法
09-27
例如，`<meta name="viewport">`标签是实现移动端适配的关键，它可以控制浏览器的视口大小。一个基本的设置可能如下： ```html , initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> ``` 这段代码告诉...
移动端适配方案、不同屏幕布局方案
qq_68155756的博客
02-14 394
一般web端的页面用不到适配方案，一般用flex布局、百分比布局、vw和vh这些就可以搞定不同宽度设备的布局问题 适配方案用于不同屏幕见跨度较大的场景下，而移动端或iPad或者安卓、ios系统由于各种手机设备屏幕大小的跨度较大，所以要用到移动端适配方案
移动端页面如何优雅的适配各种屏幕，包括PC端
sinat_33488770的博客
10-19 6230
本文为Varlet组件库源码主题阅读系列第八篇，读完本篇，可以了解到移动端页面如何适配各种尺寸的屏幕，包括pc端，另外如何将触摸事件转换成鼠标事件。
web前端学习1个月可以学习多少
qf2019的博客
08-06 731
web前端学习1个月可以学习多少，一个月基本上是学习基础知识，web前端的基本知识，网页分为三个部分，主要是网页的结构和表现，之后是网页的行为，结构和表现主要是为了让我们对网页的布局有一个很好的认识，主要是学习了很多的标签和css基础，学习这些标签是如何的使用和这些标签有哪些的特性，在什么情况下使用那些标签能够更加简洁的把网页做出来。 还有一些后边学习的动画也很好玩，在以后的学习中会学到更多的知识...
前端需要学多久
weixin_34380948的博客
10-15 1233
前言 前端需要学多久？这是一个新人的人喜欢问的问题，这个问题也很容易回答： 如果你不想学，现在就可以停止。 如果你想学，用一辈子的时间也学不完。 借用一句话：“前端工程师，首先你得是工程师”，既然是工程师，无穷无尽的知识就放在那，谁敢说在几年之内能学完，咱们都不说历史累计的知识，就说新增加的知识量就够够的了。所以不要指望26太难就能掌握前端开发。 《26天学通前端开发》 这只是为新手提供的学习...
分享两个月自学前端学习路线（附学习教程来源）
weixin_48723546的博客
06-08 2574
前端学习一条龙，包含自学教程来源，想学前端但又迷茫的小白可以参考～
CSS3模拟windows加载效果
最新发布
u011626414的专栏
08-14 272
Windows加载效果
css实现水滴效果图
yinge0508的博客
08-12 1153
【代码】css实现水滴效果图。
CSS 基础
jht_520的博客
08-10 335
比如，增加内边距可以使元素内部的内容与边框之间有更多的空间，而调整外边距可以控制元素与周围元素的距离。通过使用媒体查询，我们可以针对不同的屏幕宽度设置不同的 CSS 规则。例如，在小屏幕设备上，可以隐藏一些不必要的元素，或者改变导航栏的样式，以提供更好的用户体验。它可以决定网页中文字的字体、大小、颜色，还能设置元素的背景颜色、边框样式等。比如，通过 CSS 我们可以将网页的标题设置为醒目的大字号、独特的字体和鲜艳的颜色，使其更加吸引用户的注意力。CSS，即层叠样式表，是网页设计中不可或缺的一部分。
【playwright篇】CSS 选择器 详细用法
qadnkz的专栏
08-14 842
在 Playwright 中，CSS 选择器是非常重要的，因为它们用于定位页面上的元素。CSS 选择器允许您通过 HTML 元素的属性、类名、ID 等来定位元素。以下是 CSS 选择器的一些基本用法和示例。
vue3 移动端不同屏幕适配的方法
07-28
对于Vue 3移动端不同屏幕适配的方法，有几种常用的方式可以实现： 1. 使用CSS媒体查询：在Vue组件中...以上是一些常用的方法，你可以根据项目的需求和实际情况选择合适的方式进行移动端屏幕适配。希望能对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值