移动端，ipad，pc端H5适配

最新推荐文章于 2025-04-01 11:28:16 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2025-04-01 11:28:16 发布

阅读量5.3k

点赞数 5

分类专栏：前端文章标签： ios android css html5 css3

本文链接：https://blog.youkuaiyun.com/Yueqin0512/article/details/109404645

版权

本文介绍了如何使用媒体查询实现移动端、iPad和PC端的H5页面字体大小、控件尺寸的适配，以及通过媒体查询进行响应式布局的方法，以确保在不同设备上呈现良好的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

媒体查询方式各分辨率字体大小或控件大小适配

效果：用媒体查询方式，实现移动端，ipad，pc端横屏竖屏的的不同效果

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    
    	/*将根元素的字体大小改为62.5%，方便后面使用，1rem=10px;*/
        html,
        body {
    
            width: 100%;
            font-size: 62.5%;
        }

        /* iphone5 */
        @media only screen and (min-width: 320px) {
    
            html,
            body {
    
                font-size: 55.556% !important;
        	}
        }
        /* 一般安卓手机 */
        @media only screen and (min-width: 360px) {
    
            html,
            body {
    
                font-size: 62.5% !important;
            }
        }

        /* iphone6/7/8 */
        @media only screen and (min-width: 375px) {
    
            html,
            body {
    
                font-size: