前端案例:极速问诊项目(移动端自适应)(HTML+CSS+JS)

一个简单的移动端案例,模拟不同设备下逻辑分辨率不同,宽高自适应

正常打开整体布局

打开 f12 (ctrl + shift + M)或者点击左上角图标,将其模拟为移动端设备

在移动设备iPhone6/7/8,逻辑分辨率375的整体布局

其banner图尺寸

现在切换设备为iPad,逻辑分辨率为768,此设备下banner图尺寸自适应

再切换设备为iPhone 14 Pro Max,逻辑分辨率为430,此设备下banner图尺寸自适应

源码

HTML(index.html)代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>极速问诊</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <!-- 头部区域 -->
    <header>
        <a href="#" class="back"><span class="iconfont icon-jiantou3"></span></a>
        <h3>极速问诊</h3>
        <a href="#" class="note">问诊记录</a>
    </header>

    <!-- banner区域 -->
    <div class="banner">
        <img src="./assets/docter.jpg" alt="">
        <p><span>20s</span> 快速匹配专业医生</p>
    </div>

    <!-- 问诊类型 -->
    <div class="type">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-yisheng"></span>
                    <div class="txt">
                        <h4>三甲图文问诊</h4>
                        <p>三甲主治及以上级别医生</p>
                    </div>
                    <span class="iconfont icon-jiantou21"></span>
                </a>
            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-xinxi1"></span>
                    <div class="txt">
                        <h4>普通图文问诊</h4>
                        <p>二甲主治及以上级别医生</p>
                    </div>
                    <span class="iconfont icon-jiantou21"></span>
                </a>
            </li>
        </ul>
    </div>
    <!-- 引入flexible.js移动端布局js -->
    <script src="./js/flexible.js"></script>
</body>
</html>

CSS样式(index.css)代码:

*,
::after,
::before {
  box-sizing: border-box;
}
body,
ul,
ol,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, PingFangSC-Regular, "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #333;
}
a {
  color: #333;
  text-decoration: none;
  -webkit-tap-highlight-color: regb(0, 0, 0, 0);
}
ul {
  list-style-type: none;
}
li {
  list-style: none;
}
img {
  vertical-align: bottom;
}
header {
  display: flex;
  justify-content: space-between;
  padding: 0 0.4rem;
  height: 1.17333333rem;
  line-height: 1.17333333rem;
}
header .icon-jiantou3 {
  font-size: 0.48rem;
}
header h3 {
  font-size: 0.45333333rem;
}
header .note {
  font-size: 0.4rem;
  color: #2cb2a5;
}
.banner {
  margin-top: 0.8rem;
  margin-bottom: 0.90666667rem;
  text-align: center;
}
.banner img {
  margin-bottom: 0.48rem;
  width: 6.4rem;
  height: 5.49333333rem;
}
.banner p {
  font-size: 0.42666667rem;
}
.banner p span {
  color: #16c2a3;
}
.type {
  padding: 0 0.4rem;
}
.type li {
  margin-bottom: 0.4rem;
  padding: 0 0.4rem;
  height: 2.08rem;
  border: 0.5px solid #ededed;
  border-radius: 0.10666667rem;
}
.type a {
  display: flex;
  align-items: center;
  height: 2.08rem;
}
.type a .icon-yisheng,
.type a .icon-xinxi1 {
  margin-right: 0.37333333rem;
  width: 1.06666667rem;
  height: 1.06666667rem;
  border-radius: 50%;
  line-height: 1.06666667rem;
  text-align: center;
  font-size: 0.64rem;
  color: #faf5f5;
}
.type a .icon-yisheng {
  background-color: #16c2a3;
  background-image: linear-gradient(to right bottom, #a3eddf, #41c2aa);
}
.type a .icon-xinxi1 {
  background-color: aqua;
  background-image: linear-gradient(to right bottom, #97c4f3, #6c8dde);
}
.type a .txt {
  flex: 1;
}
.type a .txt h4 {
  margin-bottom: 0.13333333rem;
  font-size: 0.42666667rem;
  color: #3c3e42;
  line-height: 0.64rem;
}
.type a .txt p {
  font-size: 0.34666667rem;
  color: #848484;
  line-height: 0.53333333rem;
}
.type a .icon-jiantou21 {
  font-size: 0.42666667rem;
}

JS(flexible.js)代码:

(function flexible(window, document) {
    //获取html根目录
    var docEl = document.documentElement
        //dpr 物理像素比
    var dpr = window.devicePixelRatio || 1

    // adjust body font size 设置body字体大小
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
            //如果页面没有body 这个元素,则只用DOMContentLoaded 监听,等待 DOM 元素加载完毕
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10 设置html 元素字体大小
    function setRemUnit() {
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize 当页面尺寸大小发生改变时,重新设置一下rem大小。
    window.addEventListener('resize', setRemUnit)
        //pageshow 是我们重新加载页面触发的事件
    window.addEventListener('pageshow', function(e) {
        //e.persisted 返回的是 true 就是如果这个页面从缓存中获取过来,也要重新设置rem大小
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports 解决移动端浏览器支持0.5像素
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))
相关推荐
cy玩具18 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web
贩卖纯净水.2 小时前
Chrome调试工具(查看CSS属性)
前端·chrome