CSS3实现分栏布局

2019-09-11 郑州网站建设  

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

样式引入

<link rel="stylesheet" href=http://www.divcss5.com/html5/"css/index.css" media="print" />

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

 @media screen{    }

<link rel=http://www.divcss5.com/html5/stylesheet media=http://www.divcss5.com/html5/all and (orientation:portrait) href=http://www.divcss5.com/html5/portrait.css>

<link rel=http://www.divcss5.com/html5/stylesheet media=http://www.divcss5.com/html5/all and (orientation:landscape)href=http://www.divcss5.com/html5/landscape.css>

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

样式引入

<link rel="stylesheet" type="text/css" href=http://www.divcss5.com/html5/"indexA.css"  media="screen and (min-width: 800px)">

<link rel="stylesheet" type="text/css" href=http://www.divcss5.com/html5/"indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

<link rel="stylesheet" type="text/css" href=http://www.divcss5.com/html5/"indexC.css"    media="screen and (max-width: 600px)">

移动设备

      <meta name="viewport" content="" />

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]

移动设备

      <meta name="viewport" content="" />

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]


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1961.html转载请标明出处,谢谢合作!
标签:
  • 栏目
  • CSS3
  • 宽度
  • column-width
  • colum