响应式网站技术精要总结

Posted bjyx

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了响应式网站技术精要总结相关的知识,希望对你有一定的参考价值。

 
响应式网站技术精要总结
1、两个必不可少的设置
<meta http-equiv="X-UA-Compatible" content="IE=7">
#以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=8">
#以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。
<meta http-equiv="X-UA-Compatible" content="IE=edge">
以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。
<meta name="viewport" content="width=device-width, initial-scale=1" />
content属性值 :
width:可视区域的宽度,值可为数字或关键词device-width
height:同width
intial-scale:页面首次被显示是可视区域的缩放级别,取值1.0则页面按实际尺寸显示,无任何缩放
maximum-scale用户可将页面放大的程序,1.0将禁止用户放大到实际尺寸之上。
user-scalable:是否可对页面进行缩放,no 禁止缩放 
 
2.判断纵屏
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css">
**根据不同分辩率判断相关属性如下,媒体查询
  1. screen-style.css
 断点
@media screen and (min-width:1001px) and (max-width:1920px) {
 body {
      background-color:red;
      }
}
@media screen and (min-width:805px) and (max-width:1000px) {
  body {
  background-color:blue;
  }
}
@media screen and (min-width:600px) and (max-width:804px) {
  body {
  background-color:green;
  }
}
@media screen and (min-width:100px) and (max-width:599px) {
  body {
  background-color:black;
  }
}
 
  1. 调用
<link rel="stylesheet"  media="screen" href="screen-style.css">
 
如果是纵向旋转的屏幕,则可创造建如下复合查询
<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait-screen.css"
 
只有窗口宽度大于800像素的纵向显示器加载样式文件
<link rel="stylesheet" media="screen and (orientation:portrait)" and (min-width:800px)" href="800wide-portrait-screen.css" href="portrait-screen.css">
 
3百分比宽度计算:
目标元素宽度/上下文元素的宽度=百分比宽度
目标元素宽度/父元素的宽度=百分比宽度
4.弹性图片(或其它)
img,object,video,embed{ width:100%}
 永远是相对于父标签的100%,也可以是其它的合适比例
为特定的图片指定特定规则
<img class="sideImage" src="..." alt="this is a  img" />
css:
img{ max-width:100%}
.sideBlock img{ max-width:45%}
 
防止图片无限缩放,给予最外层元素设置max-width属性
.wrapper{
margin-right:auto;
max-width:1414px;
}
4.补丁[低版本兼容]
A.  
Modernizr(http://www.modernizr.com)
用于向缺少h5与css3的浏览器打补丁
 
B.
H5表单补丁
 
2. 追加引用,放在modernizr.js之后
   <script src="js/respond.min.js"></script>
3.避免在每个IE中都加载
  <!--[if lte IE 8]
             <script src="js/respond.min.js"></script>
         ![endif]
  -->
 
为那些不支持css3媒体查询的浏览器(ie6 7 8)加载Respond.js   
D.
小屏时将导航链接转换为下拉菜单
1.下载脚本程序http://github.com/mattkersley/Responsive-Menu      jquery.mobilemenu.js
2.给每个页面的导航链接部门设置一个id
  <nav role="navigation">          <ul id="mainNav">
                 ......
        </ul>
 </nav
 
或:或在resopond.js或其它中追加如下代码   p227
  Modernizr.load([
      {
            test:Modernizr.mq(‘only all‘),
            nope:‘js/respond.min.js‘
       },
      {
               //如果max-width等于600PX,则加载菜单转换脚本
            test:Modernizr.mq(‘only screen and (max-width:600px)‘),
            yep:[‘js/jquery-1.71.1.js‘, ‘js/jquery.mobilemenu.js‘],
            complete:function(){
                //资源完全加载后运行
                $(document).ready(function()){
                     $(‘#mainNav‘).mobileMenu({
                            switchWIDTH:600,                               //转换宽度(用px表示)
                            topoptionTest:‘select a page‘             //第一个选项的内容
                            indentString:‘&nbsp;&nbsp;&nbsp;‘  //缩进嵌套选项的字符串
                    })
            })
        
      }
  }
]);
 
 
完整补丁包
<script src="jquery-1.8.1.js"></script>
<script src="../js/modernizr-custom.js"></script>
<script src="../js-webshim/minified/polyfiller.js"></script>
 
 
样板文件:http://html5boilerplate.com
之中含normalize.css、polyfill和一些必要的工具如Modernizr
自动为CSS3增加前缀的代码片段
-prefix-free
 
 
 
让视频大小自适应
1.下载插件http://daverupert.com/2011/09/responsive-video-embeds.with-fitvids/ 
2.引入并调用
    a.<script src="js/fitvids.js"></script>
    b.为引用视频的文件设置id如id="content"
    <script>
    $(document).ready(function(){
       $("#content").fitvids();
    })
   </script>
 
附:
html5验证工具
IE Tester
 
 
如何让ie8支持html5
 
方法1:
 <!--以下代码强制IE8正常显示htm  20l520150824-->
  <!--[if lte IE 9]>
  <script>
   (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,,figcaption,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(‘,‘),i=e.length;while(i--){document.createElement(e[i])}})()
  </script>
  <![endif]-->
 
方法2:
<!--[if lt IE9]>
<![endif]-->
方法3:
 
动态模板
<!--[if lt IE 9]>
{% javascript ‘html5‘ %}
<![endif]-->
 
静态网站(无误):
<!--[if lt IE 9]>
   <script src="../js/html5.js"> </script>
  </script>
<![endif]-->
 


以上是关于响应式网站技术精要总结的主要内容,如果未能解决你的问题,请参考以下文章

对网站响应式设计的重新思考

web前端响应式设计总结

前端开发——移动端及响应式布局解决办法总结(适配)

前端开发——移动端及响应式布局解决办法总结(适配)

响应式布局总结

响应式布局总结