zoukankan      html  css  js  c++  java
  • Web前端开发 --》 如何实现页面同时在移动端和pc端的兼容问题

    很简单,只需要在html文件中对你引入的css进行一个类似于媒体查询的操作

    <!DOCTYPE html>
    <html lang="en">
    
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
       
        <meta name="keywords" content="" />
        <title>智能家居</title>
        <link rel="stylesheet" href="./css/common.css">
        <link rel='stylesheet' href='./css/home.css' media='screen and (min- 480px)'>
        <link rel='stylesheet' href='./css/homeMobile.css' media='screen and (max- 479px)'>
    </head>
    
    <body>
       
    </body>
    
    </html>
    

      注释为红色的代码含义也就是说  : 当你浏览器宽度大于480px时,浏览器就会解析./css/home.css这个css文件;

                      当你历览器宽度小于479px时,浏览器会解析./css/homeMobile.css这个css文件。

           而我们浏览器宽度最小宽度一般情况下都不会低于480px;而移动端浏览器宽度一般都为375左右,所以我们判断当小于480px时加载移动端的css样式表

  • 相关阅读:
    毕业考试
    相机标定
    深度相机
    怎么选工业相机
    Python Socket 编程
    Canoe 过滤Trace中报文
    Canoe 使用Replay Block CAN回放报文
    安装Jupyter Notebook
    Altium Designer PCB 画板框
    EMQX 取消匿名登录和添加、删除用户
  • 原文地址:https://www.cnblogs.com/wangqi2019/p/11088711.html
Copyright © 2011-2022 走看看