zoukankan      html  css  js  c++  java
  • html5晋级之路-响应式布局基本实现

    1.css中的Media Query(媒介查询):

      设备宽高: device-width,device-height

      渲染窗口的宽和高:width,height

      设备手持方向:orientation

      设备的分辨率:resolution

    2.使用方法:

       外联

       内嵌样式

    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>js事件测试</title>
    <link rel="stylesheet" href="js.css" type="text/css" media="only screen and (max-640px)">
    </head>
    <style>
    @media screen and (min-640px){
    body{
    background-color:#0FC;
    }
    }
    </style>
    <body>
    </body>
    </html>

    如上的两种方法 only screen and(max-640)这个最大宽度为640的时候执行,也就是说小于640

    @media screen and (min-640px)同理大于640;

  • 相关阅读:
    leetcode-剑指10-OK
    leetcode-剑指22-OK
    vue组件引入
    vue项目单页
    vue-cli脚手架创建vue项目
    vue生命周期
    ES6 DEMO
    ES6
    记录一个天坑
    CentOS 7防火墙快速开放端口配置方法
  • 原文地址:https://www.cnblogs.com/fanxinguu/p/4742761.html
Copyright © 2011-2022 走看看