zoukankan      html  css  js  c++  java
  • CSS3多媒体查询

    多媒体查询的作用:

    是一种CSS语法。可以根据浏览器的特性,一般是屏幕或浏览器宽度提供CSS规则。我们给不同的媒体类型,要设置不同的CSS样式规则。就是针对不同的媒体类型(例如手机,平板,电脑,显示器,电视机等等)设置不同的CSS样式规则。

    通常作用的方面是:适应于同时在多个页面里的布局,比如同时在(手机和电脑里展示页面)

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <style>
    body {
        background-color:lightgreen;
    }
    
    @media screen and (max- 300px) {
        body {
            background-color:lightblue;
        }
    }
    </style>
    </head>
    <body>
    <p>重置浏览器查看大小。当浏览器窗口的宽度小于 300 像素时,背景颜色会变成淡蓝,否则是淡绿色。<input type="button" onclick="resize_window()" value="查看效果"></p>
    <SCRIPT>
    <!--
    function resize_window() {
            window.open ('http://www.w3cschool.cc/try/demo_source/trycss3_media_example1.htm','newwindow','height=299,width=299,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
    }
    //写成一行
    -->
    </SCRIPT>
    
    </body>
    </html>
    

      

  • 相关阅读:
    Centos7 安装 Nginx
    Centos7 安装Php7 (貌似没成功)
    Centos7 安装 Mysql (Ubuntu)
    Centos7 安装apache(LAMP)
    Tp5 写类下商品计算数量
    Tp5 写随机数(商品货号)
    Tp5的 多项搜索框(下拉框+输入框)
    centos7 安装python3
    centos 安装notepad++
    用selenium控制已打开的浏览器
  • 原文地址:https://www.cnblogs.com/liaohongwei/p/11684097.html
Copyright © 2011-2022 走看看