zoukankan      html  css  js  c++  java
  • css3-响应式布局

    分栏布局,目前只支持webkit内核前缀

    -webkit-column-250px

    <style>
    .wrap{900px; border:1px solid #000;font:14px/28px "宋体";color:#000; text-indent:2em;-webkit-column-250px;}
    </style>
    </head>
    <body>
    <div class="wrap">
    	<p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p> 
    </div>
    </body>
    

    效果图:

    -webkit-column-count:4

    <style>
    .wrap{900px; border:1px solid #000;font:14px/28px "宋体";color:#000; text-indent:2em;-webkit-column-count:4;}
    </style>
    </head>
    <body>
    <div class="wrap">
    	<p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p>
        <p>一个IT技术人员想为IT技术人员们提供一个纯净的技术交流空间,博客园很长时间只有一个不能再简单的博客,有近四年,博客园仅靠一个人几年工作的积蓄在维持,互联网浪潮的此起彼伏.</p> 
    </div>
    </body>
    

    效果图:

    -webkit-column-gap:30px栏目间距30px

    -webkit-column-rule:1px solid black栏目间距线

    <link rel="stylesheet" type="text/css" href="index1.css" media="screen and (min-800px)">
    <link rel="stylesheet" type="text/css" href="index2.css" media="screen and (min-400px) and (max-800px)">
    <link rel="stylesheet" type="text/css" href="index3.css" media="screen and (max-400px)">
    

    不同分辨率用不同的排版方式,大于800px分辨率的显示4栏,大于400小于800的显示2栏,小于400的显示一栏。

    横竖屏显示

    <link rel="stylesheet" media="all and (orientation:portrait)" href="index2.css">
    <link rel="stylesheet" media="all and (orientation:landscape)" href="index1.css">
    

    横屏的显示4栏,竖屏的显示2栏。

    style样式表写法

    <style>
    @media screen and (min-600px){
    .wrap{ border:1px solid #000;font:16px/28px "宋体";color:#000; text-indent:2em;-webkit-column-count:4;-webkit-column-gap:30px;
    -webkit-column-rule:1px solid #000;}
    	}
    @media screen and (max-600px){
    .wrap{border:1px solid #000;font:14px/28px "宋体";color:#000; text-indent:2em;-webkit-column-count:2;-webkit-column-gap:20px;
    -webkit-column-rule:1px solid #000;}
    	}
    </style>
    
    <style>
    @media screen and (min-800px){
    .wrap{ border:1px solid #000;font:16px/28px "宋体";color:#000; text-indent:2em;-webkit-column-count:4;-webkit-column-gap:30px;
    -webkit-column-rule:1px solid #000;}
    	}
    @import url("index3.css") screen and (min-400px) and (max-800px);
    @media screen and (max-400px){
    .wrap{border:1px solid #000;font:14px/28px "宋体";color:#000; text-indent:2em;-webkit-column-count:2;-webkit-column-gap:20px;
    -webkit-column-rule:1px solid #000;}
    	}
    </style>
    
  • 相关阅读:
    (转)simple-framework(MaliSDK框架分析)
    (转)libhybris及EGL Platform-在Glibc生态中重用Android的驱动
    (原)在firefly_rk3288开发板上解决openGL在设置32位色深以后出现花屏的问题
    参考论坛:Mali kernel driver TX011-SW-99002-r5p1-00rel0 for firefly
    (转)android媒体--stagefright概述【一】
    (转)android系统架构及源码目录结构
    (原)linux下利用cmake来编译jthread开源库
    (原)U盘可见容量不能被识别的处理方法
    学会阅读Java字节码
    JVM
  • 原文地址:https://www.cnblogs.com/zswmv/p/6725802.html
Copyright © 2011-2022 走看看