老师帮看一下这个屏幕适配字体问题
来源：3-6 通用适配应用--商品推荐
要每天学习的小蓝同学
2021-11-03 16:50:31
相关截图：
相关代码：
<body> <header class="header-container"> <div class="navbar"> <div class="navbar-left"> <i class="iconfont icon-scan"></i> </div> <div class="navbar-center"> <div class="searchBox"> <div class="searchBox-prepend"> <i class="iconfont icon-search"></i> </div> <input type="text" class="searchBox-input" placeholder="开学季有礼，好货5折起"> <div class="searchBox-append"> <i class="iconfont icon-close"></i> </div> </div> </div> <div class="navbar-right"> <i class="iconfont icon-msg"></i> </div> </div> </header> <div class="main-container"> <div class="slider-container"> <img src="img/slider/1.jpg" alt="slider"> </div> <nav class="nav-container"> <ul class="nav"> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/1.png" alt="nav" class='nav-img'> <span class="nav-text">团购</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/2.png" alt="nav" class='nav-img'> <span class="nav-text">一元购</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/3.png" alt="nav" class='nav-img'> <span class="nav-text">优惠券</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/4.png" alt="nav" class='nav-img'> <span class="nav-text">教育</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/5.png" alt="nav" class='nav-img'> <span class="nav-text">旅行</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/6.png" alt="nav" class='nav-img'> <span class="nav-text">在线订餐</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/7.png" alt="nav" class='nav-img'> <span class="nav-text">庆典</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/8.png" alt="nav" class='nav-img'> <span class="nav-text">秒杀</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/9.png" alt="nav" class='nav-img'> <span class="nav-text">拍卖</span> </a> </li> <li class="nav-item"> <a href="###" class="nav-link"> <img src="img/nav/10.png" alt="nav" class='nav-img'> <span class="nav-text">服务</span> </a> </li> </ul> </nav> </div> </body>
相关代码：
html,body {
width: 100%;
height: 100%;
}
/* header */
.header-container {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
width: 100%;
height: 2.5rem;
background-color: rgba(222,24,27,0.9);
}
/* main-container */
.main-container {
padding: 2.5rem 0;
background-color: #eee;
}
/* nav-container */
.nav-container {
background-color: #fff;
margin-bottom: .5rem;
}
/* header navbar */
.navbar {
display: flex;
height: 100%;
}
.navbar-left,
.navbar-center,
.navbar-right {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.navbar-left,
.navbar-right {
width: 2.2rem;
}
.navbar-center {
flex: 1;
}
.navbar-left .iconfont,
.navbar-right .iconfont{
color: #fff;
font-size: 1.2rem;
}
/* searchBox */
.searchBox {
display: flex;
width: 100%;
height: 1.6rem;
border-radius: .8rem;
background-color: #fff;
}
.searchBox-prepend,
.searchBox-input,
.searchBox-append {
height: 100%;
}
.searchBox-prepend,
.searchBox-append {
display: flex;
justify-content: center;
align-items: center;
width: 1.6rem;
}
.searchBox-input {
flex: 1;
}
.searchBox .iconfont {
color: #ccc;
font-size: .9rem;
font-weight: bold;
}
/* main-container nav */
.nav {
display: flex;
flex-wrap: wrap;
padding: 0.8rem 0 0.4rem;
}
.nav-item {
width: 20%;
margin-bottom: 0.4rem;
}
.nav-link {
display: block;
text-align: center;
}
.nav-img{
width: 2.25rem;
height: 2.25rem;
margin-bottom: 0.2rem;
}
.nav-text {
display: block;
}相关代码：
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-size: 12px;
color: #5d655b;
}
a {
font-size: 12px;
color: #686868;
text-decoration: none;
}
input {
font-size: 12px;
border:none;
background-color:none;
outline: none;
}
[data-dpr='2']body,
[data-dpr='2']a,
[data-dpr='2']input{
font-size: 24px;
}
[data-dpr='3']body,
[data-dpr='3']a,
[data-dpr='3']input{
font-size: 36px;
}
li {
list-style: none;
}
img {
vertical-align: top;
border: none;
width: 100%;
}相关代码：
@font-face {
font-family: "iconfont"; /* Project id 2910422 */
src: url('../fonts/iconfont.woff2?t=1635860020635') format('woff2'),
url('../fonts/iconfont.woff?t=1635860020635') format('woff'),
url('../fonts/iconfont.ttf?t=1635860020635') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-close:before {
content: "\e620";
}
.icon-search:before {
content: "\e600";
}
.icon-scan:before {
content: "\e749";
}
.icon-msg:before {
content: "\e64d";
}写回答
1回答
-
同学你好，解答如下：
1、 建议同学自己看一下html中data-dpr有没有动态生效：
a) 如果没有就请同学检查一下有没有引入js。
b) 如果有且出现了文字大小缩放的问题，那么建议同学调整到iphone6\7\8模式下刷新一下看看。（在未来的工作中前端多数以iphone6\7\8作为标准）
2、另建议同学在Responsive的模式下手动拖拽视口大小后，手动刷新一下页面看看。
3、如以上解决方案没有达到预期的效果，那么请同学将js代码与html代码粘全，老师来帮你找找还有没有别的原因。
祝学习愉快~
0
相似问题