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'
    });

  • 相关阅读:
    Rainmeter 雨滴桌面 主题分享
    行人检測之HOG特征(Histograms of Oriented Gradients)
    const和readonly差别
    ADB命令解析
    Java实现 蓝桥杯VIP 算法训练 接水问题
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
    Java实现 蓝桥杯VIP 算法训练 星际交流
  • 原文地址:https://www.cnblogs.com/recordlife/p/4478520.html
Copyright © 2011-2022 走看看