自适应网页里,字体大小如何自适应屏幕

字体大小使用 em, rem 作为单位,然后使用 media query 来调整 html 元素的 font-size

自适应网站

html {font-size: 62.5%!important; /* 10÷16=62.5% */}
@media only screen and (min-width: 481px){
    html {
        font-size: 94%!important; /* 15.04÷16=94% */
    }
}
@media only screen and (min-width: 561px){
    html {
        font-size: 109%!important; /* 17.44÷16=109% */
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 125%!important; /* 20÷16=125% */
    }
}

app

@media only screen and (min-width: 320px){html {font-size: 62.5%!important;}}
@media only screen and (min-width: 360px){html {font-size: 72.5%!important;}}
@media only screen and (min-width: 400px){html {font-size: 82.5%!important;}}
@media only screen and (min-width: 480px){html {font-size: 94%!important;}}


  • 4
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
以下是一个基于响应式设计的H5网页自适应屏幕大小的完整代码示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Web Design Example</title> <style> /* 定义网页的基本样式 */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; } /* 定义网页的主要内容区域 */ .container { max-width: 1200px; margin: 0 auto; padding: 20px; background-color: #ffffff; box-shadow: 0 0 10px rgba(0,0,0,0.1); } /* 定义网页的标题样式 */ h1 { font-size: 36px; margin: 0 0 20px 0; text-align: center; } /* 定义网页的图片样式 */ img { max-width: 100%; height: auto; display: block; margin: 0 auto; } /* 定义网页的响应式样式 */ @media screen and (max-width: 768px) { /* 当屏幕宽度小于等于768px时,将网页的内容区域最大宽度设为100% */ .container { max-width: 100%; } /* 当屏幕宽度小于等于768px时,将网页的标题字体大小设为24px */ h1 { font-size: 24px; } } </style> </head> <body> <div class="container"> <h1>Responsive Web Design Example</h1> <img src="https://via.placeholder.com/1200x600" alt="Responsive Web Design Example"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique neque ac nisi maximus, id venenatis lectus sodales. Sed auctor, arcu in egestas commodo, mauris odio semper orci, at cursus felis massa at ex. Etiam euismod vehicula tortor, vel pharetra sem consequat vitae. Duis vestibulum, neque at viverra volutpat, tortor est suscipit est, sed ultrices mi tellus non quam. Duis malesuada finibus lorem, nec gravida diam malesuada vel. Sed feugiat egestas leo, vitae faucibus mauris cursus vel. Integer tincidunt, purus eu vestibulum dignissim, turpis lacus aliquet neque, auctor iaculis elit nulla eu dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce auctor metus et dolor finibus, eget vestibulum nulla rutrum. Nulla facilisi.</p> </div> </body> </html> ``` 在上述代码中,我们使用了`@media`规则来定义网页的响应式样式,当屏幕宽度小于等于768px时,将网页的内容区域最大宽度设为100%,将网页的标题字体大小设为24px。这样,我们就可以在不同的设备和屏幕大小下呈现出更好的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值