css3弹性盒子、媒体查询、多列布局

css3

一、弹性盒子

    
    
    
    
    



    

        标题
    
    
2
    

        
首页
        
订单
        
我的
    

二、css3媒体查询

1.媒体查询：屏幕适配，pc，移动端

2. 媒体类型：

• all ：所有多媒体类型设备
• print：打印机
• not print 不包含打印设备
• screen：电脑屏幕，平板，智能手机等
• speech：屏幕阅读器

3.媒体查询语法

content属性	作用
width	可视区域的宽度，值可为数字或关键词device-width
initial-scale	可视区域的初始缩放值，为一个数字，可以带小数
maximum-scale	可视区域的最大缩放值，为一个数字，可以带小数
minimum-scale	可视区域的最小缩放值，为一个数字，可以带小数
user-scalable	是否允许用户进行缩放, no 不允许，yes 允许

不加限制条件 所有的屏幕 共有的样式：

• 写min-width 注意：从小到大写

• 写max-width 注意：从大到小写

• 写min-width and max-width

• 引用

三、多列布局

• 添加meta 响应移动端
  1.viewport 视口
  2.width=device-width 宽度等于屏幕的宽
  3.initial-scale=1.0 伸缩比例1.0
  4.minimum-scale=1.0 最小比例1.0
  5.maximum-scale=3.0 最大比例3.0
  6.user-scalable=no 禁止用户缩放

    
    
    
    



    
1
    
2
    
3
    
sssss