zoukankan      html  css  js  c++  java
  • 响应式布局(Responsive Layout)/流式布局(Fluid Layout)/自适应布局(Adaptive)

    1.使用媒体查询来适应不同视口的固定宽度设计,例如bootstrap的container类。

    2.将固定像素布局转换成灵活的百分比布局,才能让页面元素根据视口大小在一个又一个媒体查询间伸缩修正样式。

    3.目标元素宽度 / 上下文元素宽度 = 百分比宽度

    4.响应式的文字,使用百分比和em,em的实际大小是相对于其上下文的字体大小而言的,目标元素尺寸 / 上下文元素尺寸 = 百分比尺寸

    font-size:100%;
    font-size:16px;
    font-size:1em;

    5.弹性图片,去掉图片的width,height属性,指定max-100%可使图片自动缩放到与其容器100%匹配,此样式可应用在其他多媒体标签上。

    img, object, video, embed{
        max-width:100%;
    }

    6.超级全能max-width属性:另一种限制页面无限扩张的方法是给最外层div设置max-width属性。

    7.为不同的屏幕尺寸提供不同的图片,尝试为较小的屏幕尺寸提供较小的图片。

  • 相关阅读:
    SVN服务的配置与管理
    SVN配置多仓库与权限控制
    SVN使用详解
    这个问题他又来了,如何学编程!
    乘风破浪的程序员们
    Java 学习路线(史上最全 2020 版 ~ 持续更新中)
    P4782 【模板】2-SAT 问题
    HDU
    2020.8.3
    Interesting Computer Game
  • 原文地址:https://www.cnblogs.com/zcynine/p/5018026.html
Copyright © 2011-2022 走看看