CSS3实现分栏布局

column-width 栏目宽度

column-count 栏目列数

column-gap 栏目距离

column-rule 栏目间隔线

媒体类型

all 所有媒体

braille 盲文触觉设备

embossed 盲文打印机

print 手持设备

projection 打印预览

screen 彩屏设备

speech '听觉'类似的媒体类型

tty 不适用像素的设备

tv 电视

关键字

and

not not关键字是用来排除某种制定的媒体类型

only only用来定某种特定的媒体类型

媒体特性

(max-width:600px)

(max-device-width: 480px) 设备输出宽度

(orientation:portrait) 竖屏

(orientation:landscape) 横屏

(-webkit-min-device-pixel-ratio: 2) 像素比

devicePixelRatio 设备像素比

window.devicePixelRatio = 物理像素 / dips

样式引入

@import url("css/demo.css") screen;

@media screen{ }

@media screen and (min-width:360px) and (max-width:500px) { }

样式引入

移动设备

width [pixel_value | device-width(设备宽度)]

height [pixel_value | device-height(设备高度)]

user-scalable 是否允许手动缩放 （no||yes）

initial-scale 初始比例

minimum-scale 允许缩放的最小比例

maximum-scale 允许缩放的最大比例

target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

移动设备

width [pixel_value | device-width(设备宽度)]

height [pixel_value | device-height(设备高度)]

user-scalable 是否允许手动缩放 （no||yes）

initial-scale 初始比例

minimum-scale 允许缩放的最小比例

maximum-scale 允许缩放的最大比例

target-densitydpi [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！