您的当前位置:首页正文

CSS3媒体查询使用小结

2020-11-27 来源:个人技术集锦

首先我们在使用Media的时候需要先设置下面这段代码,来兼容移动设备的展示效果:

准备工作1:设置Meta标签

这段代码的几个参数解释:

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

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

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

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

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

  • 准备工作2:加载兼容文件JS

    因为IE8既不支持HTML5也不支持CSS3 Media,所以我们需要加载两个JS文件,来保证我们的代码实现兼容效果:

     
                
                
                
        
    显示全文