前端杂谈 · Web

远古时期的电脑端页面实现网页布局响应式思路

•̀.̫•́✧ · 4月19日 · 2020年本文3160字 · 阅读8分钟194

工作中有时候会遇到,老板让你把早已开发好的PC端网站转成自适应网站。如果这种情况下重写CSS会变得非常麻烦,博主最烦的就是修改别人代码,修改代码就需要分析读懂对方的代码,对方的代码逻辑清晰可维护性高,还好一点,一旦代码混乱改起来非常麻烦。有那个时间不如自己重写一遍,要比改代码快的多。本文就说说怎么在不改原始代码结构的基础上,来实现网页布局响应式扩展开发。

准备工作

核心还是用到C3的媒体查询技术@media screen来解决这个问题,使用之前我们需要设置Meta标签:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

/**
参数解释:

width = device-width:宽度等于当前设备的宽度

height = device-height:高度等于当前设备的高度

initial-scale:初始的缩放比例(默认设置为1.0)  

minimum-scale:允许用户缩放到的最小比例(默认设置为1.0)    

maximum-scale:允许用户缩放到的最大比例(默认设置为1.0)   

user-scalable:用户是否可以手动缩放(默认设置为no,因为我们不希望用户放大缩小页面) 

*/

如果还要兼容IE8浏览器,那么需要引入html5shiv.jsrespond.min.js来兼容H5标签和C3的媒体查询Media

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
  <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->

既然考虑到IE浏览器,光是上面两个JS还不够。因为一些电脑上IE浏览器即使升级到了IE9以上,浏览器的文档模式还是诡异的IE8。。。真是卧了个大槽,为了解决这种情况,我们需要设置下meta标签让浏览器使用最高文档模式:

<meta http-equiv="X-UA-Compatible" content="IE=edge">

/**
如果想使用固定的IE版本,可写成:<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
*/

还有更牛逼的写法

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这里面属性有一个chrome=1,这个是Google Chrome Frame(谷歌内嵌浏览器框架GCF)。如果用户的电脑装了这个插件,就可以让IE无论在什么版本都使用Webkit引擎及V8引擎进行排版和运算;如果电脑没装,就会以IE最高文档模式显示

媒体查询Media写法

C3媒体查询media标准写法:

@media screen and (max-width: 960px){
    body{
        background: #000;
    }
}

代码解释:当前页面尺寸小于960px的时候,执行里面的CSS样式。screen表示设备打印网页时采用衬线字体,屏幕显示采用无衬线字体。如果你的网站不考虑页面打印时:

@media (max-width: 960px){
    body{
        background: #000;
    }
}

浏览器尺寸等于960px代码

@media screen and (max-device-width:960px){
    body{
        background:red;
    }
}

结合使用方法

@media screen and (min-width:960px) and (max-width:1200px){
    body{
        background:yellow;
    }
}

代码解释:当浏览器宽度大于960px小于1200px的时执行里面的CSS。

Media参数

  • width:浏览器可视宽度。
  • height:浏览器可视高度。
  • device-width:设备屏幕的宽度。
  • device-height:设备屏幕的高度。
  • orientation:检测设备目前处于横向还是纵向状态。
  • aspect-ratio:检测浏览器可视宽度和高度的比例。(例如:aspect-ratio:16/9)
  • device-aspect-ratio:检测设备的宽度和高度的比例。
  • color:检测颜色的位数。(例如:min-color:32就会检测设备是否拥有32位颜色)
  • color-index:检查设备颜色索引表中的颜色,他的值不能是负数。
  • monochrome:检测单色楨缓冲区域中的每个像素的位数。(这个太高级,估计咱很少会用的到)
  • resolution:检测屏幕或打印机的分辨率。(例如:min-resolution:300dpi或min-resolution:118dpcm)。
  • grid:检测输出的设备是网格的还是位图设备。

根据页面尺寸引入不同的CSS文件

要实现远古PC站转自适应的话,最简单的办法让网站根据不同的屏幕尺寸加载不同的CSS文件:

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style.css" rel="nofollow noopener"  rel="nofollow noopener" >

以上代码当浏览器宽度小于960px时,执行的样式文件。但是这个方法有个缺点,会增加页面http的请求次数。

页面结构

<html>

<head>
  <meta charset="UTF-8">
  <title>document</title>
  <link rel="shortcut icon" href="" rel="nofollow noopener" >
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <!-- 当浏览器尺寸大于960px-->
  <link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="css/main.css" rel="nofollow noopener" >

  <!-- 当浏览器尺寸小于960px-->
  <link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="css/index.css" rel="nofollow noopener" >

  
  <style>
    <!-- 当浏览器尺寸大于960px 显示隐藏对应的元素-->
    @media screen and (min-width:960px) {
      .max {
        display: block;
      }
      .min {
        display: none;
      }
    }
    <!-- 当浏览器尺寸小于768px 显示隐藏对应的元素-->
    @media screen and (max-width:768px) {
      .max {
        display: none;
      }
      .min {
        display: block;
      }
    }
  </style>

</head>

<body>
  <div class="max">  
   ... 
  </div>

  <div class="min"> 
   ... 
  </div>
</body>

</html>

扩展

其实早在C2的时候就支持Media了,比如我们在link标签上设置打印网页时采用衬线字体

<link rel="stylesheet" type="text/css" media="screen" href="style.css" rel="nofollow noopener"  rel="nofollow noopener" >
0 条回应