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

    响应式布局

    一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验。

    媒体类型

    在何种设备或者软件上将页面打开

    all:所有媒体
    braille:盲文触觉设备
    embossed:盲文打印机
    print:手持设备
    projection:打印机预览
    screen:彩屏设备
    speech:'听觉'类似的媒体类型
    tty:不适用像素的设备
    tv:电视

    css:

    #box{100px;height:100px;background-color:red;}
    @media embossed{
        /*盲文打印机是绿色*/
        #box{background-color:green;}
    }
    @media tv{
        /*在tv上是粉色*/
        #box{background-color:pink;}
    }
    @media all{
        /*在所有媒体上是红色*/
        #box{background-color:red;}
    }
     

    关键字

    and:连接媒体类型和媒体特性

    @media all and (min-1201){  }
            not:关键字是用来排除某种制定的媒体类型
    
    @media not tv
            only:只有在特定的某种设备上识别
    
    @media only tv
            媒体特性
            min-width:当屏幕大小 大于等于 某个值的时候识别 
    
            max-width:当屏幕大小 小于等于 某个值的时候识别
    
            orientation:横竖屏(portrait/landscape)
    
    @media (orientation:portrait) { //竖屏的时候
        div{ background-color: yellow; }
    }
    @media (orientation:landscape) { //横屏的时候
        div{ background-color: green; }
    }

    竖屏/横屏检测的原理是通过可视区的宽度和高度之间的比例进行检测的。但在移动端中可能会出现问题,比如点击一个文本输入框的时候,会弹出键盘,这个键盘会影响屏幕可是区域的宽高,这种情况会造成竖屏/横屏检测错误。

    样式引入方式

    样式表末尾添加

    @media all and (min-600px){  }

    link标签

    <link rel='stylesheet' href='css/01.css' media='all and (min-600px)'  />

    写在样式表头部

    <style>
        @import url(01.css) (min-400px);
        @import url(02.css) (min-600px);
        @import url(03.css) (min-800px);
        @import url(04.css) (min-1000px);
        body{
            margin: 0;
        }
        div{
            height: 100px;
            background-color: #f00;
            border: 1px solid #000;
            box-sizing: border-box;
            float: left;
        }
    </style>

    电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

    常用的几种屏幕宽度设定:

    @media screen and (min- 1200px) {
        css-code;
    }
    @media screen and(min- 960px) and (max- 1199px) {
        css-code;
    }
    @media screen and(min- 768px) and (max- 959px) {
        css-code;
    }
    @media screen and(min- 480px) and (max- 767px) {
        css-code;
    }
    @media screen and (max- 479px) {
        css-code;
    }
  • 相关阅读:
    1.C和C++区别,以及const分析(底层const/顶层const)
    4.移植驱动到3.4内核-移植总结
    3.移植驱动到3.4内核-移植DM9000C驱动
    2.移植3.4内核-支持烧写yaffs2,裁剪内核并制作补丁
    Android Support v4、v7、v13、v14、v17的区别和应用场景
    Android利用canvas画各种图形
    ActionBar 自定义布局定义
    android动画坐标定义
    GitHub上最著名的Android播放器开源项目大全
    CardView 简介和使用
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13815268.html
Copyright © 2011-2022 走看看