zoukankan      html  css  js  c++  java
  • 响应式设计思维

    Responsive Web Design

    通过媒体查询@media为不同大小的设备加载不同层叠样式表

    <meta name="viewport" content="width=device-width" />

    <link rel="stylesheet" type="text/css" href="pc.css" media="screen" />

    <link rel="stylesheet" type="text/css" href="tab.css" media="screen and (min-600px) and (max-979px)" />

    <link rel="stylesheet" type="text/css" href="phone.css" media="screen and (min-599px)" />

    元素宽度属性为占父元素的占比而不是固定数值

    图片自适应 设宽度为100%  高度自动 给父元素设定固定比例

    可以通过设置 html{ font-size:300%; } 而页面中需要具体宽度则用 rem 代替

    媒体查询时则可以通过更改不同设备的 html{ font-size:200%; } 来实现,不必加载三个样式表。

  • 相关阅读:
    flex-direction
    flex-grow
    Push API
    ServiceWorker.state
    Using Service Workers
    Promise.then
    Promise()
    Using promises
    node-rsa
    async.waterfall
  • 原文地址:https://www.cnblogs.com/lancelotseven/p/7815646.html
Copyright © 2011-2022 走看看