zoukankan      html  css  js  c++  java
  • HTML5 and CSS3 实战经典教程,相应式设计

    1. meta viewport:

    阻止移动浏览器自动调整页面大小: <meta name='viewport“ content="width= device-width,initial-scale=2.0,user-scalable=no"> 

    <meta>标签中可以设置具体的宽度(如像素值)或者缩放比例如2.0(设备实际尺寸的两倍 user-scalable=no 即是禁止缩放。 最好设成initial-scale=1.0。

    2. 媒体查询:  媒体查询只能为我们提供自适应设计效果,不能真正实现响应式设计。对于响应式设计来说,媒体查询是必需的 ,更需要流式布局。@media screen and(max-width:380px){body{background-color:red;}},  @media screen and(min-width:700px)

    3. 什么是流式布局?P57

    使用相对宽度,相对像素,而不是使用固定像素。

    width = 23%  percent, 大起作用。

    字体 px  换成  em 等等。

    4.

    妮子脚本: modernizr  

    页面中引入妮子脚本后,页面中用firebug 看到head 中加入很多属性 ,这时候在页面中加的css 如果包含这个属性 就执行,如果不包含就执行no-属性

    例子:

    .boxshadow #tel { box-shadow: #666 1px 1px 1px;}
    .no-boxshadow #tel { border: 2px solid black;}

    5Responde.js 可以实现IE<8 的宽度媒体查询功能,为了引入这个js,我们需要判断是否需要引入这个js

    <!--[if lte IE 8]>
    <script src="js/respond.min.js"/></script>
    <![endif]-->

    更好的方法用妮子脚本。

    Modernizr.load({
    test: Modernizr.mq('only all'),
    nope: 'js/respond.min.js'
    });

    Modernizr.load({
    test: Modernizr.mq('only all'),
    yep: 'js/pass.js',
    nope: ['js/respond.min.js', 'fail-polyfill.js', 'fail.css'] ,
    both: 'js/for-all.js'
    });

  • 相关阅读:
    python_控制台输出带颜色的文字方法
    Django 知识总结(一)
    C# 实现俄罗斯方块
    一起学SpringMVC之Request方式
    一起学SpringMVC之RequestMapping详解
    一起学SpringMVC之Json
    一起学SpringMVC之注解
    一起学SpringMVC之入门篇
    一起学Android之Xml与Json解析
    一起学Android之AsyncTask
  • 原文地址:https://www.cnblogs.com/recordlife/p/4478520.html
Copyright © 2011-2022 走看看