网站建设会计分录,wordpress搬家后错乱,网站开发学习案例,什么网站能接工地做引言 一直想对CSS3的媒体查询和Responsive进行一下记录和总结#xff0c;今天拿出点时间来做一下。
媒体查询的历史 随着浏览器终端的多样化#xff0c;无法保证一个网页在不同的设备上呈现出想同的结果#xff0c;所以Media Query诞生了#xff0c;让一个页面适用不同的终…引言 一直想对CSS3的媒体查询和Responsive进行一下记录和总结今天拿出点时间来做一下。
媒体查询的历史 随着浏览器终端的多样化无法保证一个网页在不同的设备上呈现出想同的结果所以Media Query诞生了让一个页面适用不同的终端。 Media Query早在CSS2的时候就出现CSS2用link /标签而CSS3用media定义的CSS里面。两者用法类似但是CSS3与CSS2相比会减小页面的请求。
媒体类型Media Tyep 媒体类型也是一个挺重要的属性CSS2里就很常见可以通过媒体类型指定不同的样式。
媒体类型 值描述all用于所有设备aural已废弃。用于语音和声音合成器braille已废弃。 应用于盲文触摸式反馈设备embossed已废弃。 用于打印的盲人印刷设备handheld已废弃。 用于掌上设备或更小的装置如PDA和小型电话print用于打印机和打印预览projection已废弃。 用于投影设备screen用于电脑屏幕平板电脑智能手机等。speech应用于屏幕阅读器等发声设备tty已废弃。 用于固定的字符网格如电报、终端设备和对字符有限制的便携设备tv已废弃。 用于电视和网络电视
其中Screen、All、Print这三个最常用。
媒体类型引用方法 实际的媒体引用方法有十几种但是主要的有4种。
1.link方法
link typetext/css hrefxxx.css mediascreen
link typetext/css hrefxxx.css mediaprint2.xml方法
?xml-stylesheet relstylesheet mediascreen hrefxxx.css3.import
import url(xxx.css) screen;
import url(xxx.css) print;4.media
media screen{...}以上几种方法各有利弊建议用link和meida这两种方法。
媒体特性Media Query 可以将Media Query看成“Meida Type判断条件 CSS符合条件的样式规则”
简单例子 link relstylesheet mediascreen and (min-width:1024px)media screen and (min-width:1024px){...
}设备特性 值描述aspect-ratio定义输出设备中的页面可见区域宽度与高度的比率color定义输出设备每一组彩色原件的个数。如果不是彩色设备则值等于0color-index定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表则值等于0device-aspect-ratio定义输出设备的屏幕可见宽度与高度的比率。device-height定义输出设备的屏幕可见高度。device-width定义输出设备的屏幕可见宽度。grid用来查询输出设备是否使用栅格或点阵。height定义输出设备中的页面可见区域高度。max-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。max-color定义输出设备每一组彩色原件的最大个数。max-color-index定义在输出设备的彩色查询表中的最大条目数。max-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最大比率。max-device-height定义输出设备的屏幕可见的最大高度。max-device-width定义输出设备的屏幕最大可见宽度。max-height定义输出设备中的页面最大可见区域高度。max-monochrome定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。max-resolution定义设备的最大分辨率。max-width定义输出设备中的页面最大可见区域宽度。min-aspect-ratio定义输出设备中的页面可见区域宽度与高度的最小比率。min-color定义输出设备每一组彩色原件的最小个数。min-color-index定义在输出设备的彩色查询表中的最小条目数。min-device-aspect-ratio定义输出设备的屏幕可见宽度与高度的最小比率。min-device-width定义输出设备的屏幕最小可见宽度。min-device-height定义输出设备的屏幕的最小可见高度。min-height定义输出设备中的页面最小可见区域高度。min-monochrome定义在一个单色框架缓冲区中每像素包含的最小单色原件个数min-resolution定义设备的最小分辨率。min-width定义输出设备中的页面最小可见区域宽度。monochrome定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备则值等于0orientation定义输出设备中的页面可见区域高度是否大于或等于宽度。resolution定义设备的分辨率。如96dpi, 300dpi, 118dpcmscan定义电视类设备的扫描工序。width定义输出设备中的页面可见区域宽度。
浏览器兼容性
CSS3 media query 兼容性 使用语法 media 媒体类型 and (媒体特性) 样式代码媒体特性书写分两个部分第一个部分是媒体特性第二个部分为媒体特性的值两个部分之间用:隔开。如
media screen and (max-width:1024px) and (min-width:300px){div{color:red;}
}媒体类型可省略默认为all。
响应式Responsive设计 有了CSS的媒体查询这个功能自然有了所谓的响应式。
响应式历史 由Ethan Marcotte在A List Apart发表了率先发表了响应式的创新文章奖三种开发技术整合起来弹性网格布局、弹性图片、媒体和媒体查询将其命名为RWDResponsive Web Design 响应式网页设计。
1.设置Meta标签 手机浏览器是把页面放在一个虚拟的“窗口”viewport中通常这个虚拟的“窗口”viewport比屏幕宽这样就不用把每个网页挤到很小的窗口中这样会破坏没有针对手机浏览器优化的网页的布局用户可以通过平移和缩放来看网页的不同部分。
meta标记使用方法
meta nameviewport content /content属性值如下这些属性值主要用来处理可视区域。
值描述width设置layout viewport 的宽度为一个正整数或字符串”width-device”initial-scale设置页面的初始缩放值为一个数字可以带小数minimum-scale允许用户的最小缩放值为一个数字可以带小数maximum-scale允许用户的最大缩放值为一个数字可以带小数height设置layout viewport 的高度这个属性对我们并不重要很少使用user-scalable是否允许用户进行缩放值为”no”或”yes”, no 代表不允许yes代表允许
通常会这样写
meta nameviewport contentwidthdevice-width, initial-scale1.0, maximum-scale1.0, user-scalableno2.兼容IE JS 因为IE9才支持CSS3所以需要对IE9以下版本进行兼容处理。
!--[if lt IE 9]
script srchttps://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js/script
script srchttps://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js/script
![endif]--//html5shiv.js
/*HTML5 Shiv v3.7.0 | afarkas jdalton jon_neal rem | MIT/GPL2 Licensed
*/
(function(l,f){function m(){var ae.elements;returnstringtypeof a?a.split( ):a}function i(a){var bn[a[o]];b||(b{},h,a[o]h,n[h]b);return b}function p(a,b,c){b||(bf);if(g)return b.createElement(a);c||(ci(b));bc.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache{},b.createElema.createElement,b.createFraga.createDocumentFragment,b.fragb.createFrag();
a.createElementfunction(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragmentFunction(h,f,return function(){var nf.cloneNode(),cn.createElement;h.shivMethods(m().join().replace(/[\w\-]/g,function(a){b.createElem(a);b.frag.createElement(a);returnc(a)}));return n})(e,b.frag)}function q(a){a||(af);var bi(a);if(e.shivCSS!j!b.hasCSS){var c,da;cd.createElement(p);dd.getElementsByTagName(head)[0]||d.documentElement;c.innerHTMLxstylearticle,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}/style;
cd.insertBefore(c.lastChild,d.firstChild);b.hasCSS!!c}g||t(a,b);return a}var kl.html5||{},s/^|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o_html5shiv,h0,n{},g;(function(){try{var af.createElement(a);a.innerHTMLxyz/xyz;jhiddenin a;var b;if(!(b1a.childNodes.length)){f.createElement(a);var cf.createDocumentFragment();bundefinedtypeof c.cloneNode||
undefinedtypeof c.createDocumentFragment||undefinedtypeof c.createElement}gb}catch(d){gj!0}})();var e{elements:k.elements||abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video,version:3.7.0,shivCSS:!1!k.shivCSS,supportsUnknownElements:g,shivMethods:!1!k.shivMethods,type:default,shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(af);
if(g)return a.createDocumentFragment();for(var bb||i(a),cb.frag.cloneNode(),d0,em(),he.length;dh;d)c.createElement(e[d]);return c}};l.html5e;q(f)})(this,document);
//respond.min.js
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
/*! NOTE: If youre already including a window.matchMedia polyfill via Modernizr or otherwise, you dont need this part */
window.matchMediawindow.matchMedia||function(a){use strict;var c,da.documentElement,ed.firstElementChild||d.firstChild,fa.createElement(body),ga.createElement(div);return g.idmq-test-1,g.style.cssTextposition:absolute;top:-100em,f.style.backgroundnone,f.appendChild(g),function(a){return g.innerHTMLshy;style mediaa #mq-test-1 { width: 42px; }/style,d.insertBefore(f,e),c42g.offsetWidth,d.removeChild(f),{matches:c,media:a}}}(document);/*! Respond.js v1.3.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs */
(function(a){use strict;function x(){u(!0)}var b{};if(a.respondb,b.updatefunction(){},b.mediaQueriesSupporteda.matchMediaa.matchMedia(only all).matches,!b.mediaQueriesSupported){var q,r,t,ca.document,dc.documentElement,e[],f[],g[],h{},i30,jc.getElementsByTagName(head)[0]||d,kc.getElementsByTagName(base)[0],lj.getElementsByTagName(link),m[],nfunction(){for(var b0;l.lengthb;b){var cl[b],dc.href,ec.media,fc.relstylesheetc.rel.toLowerCase();df!h[d](c.styleSheetc.styleSheet.rawCssText?(p(c.styleSheet.rawCssText,d,e),h[d]!0):(!/^([a-zA-Z:]*\/\/)/.test(d)!k||d.replace(RegExp.$1,).split(/)[0]a.location.host)m.push({href:d,media:e}))}o()},ofunction(){if(m.length){var bm.shift();v(b.href,function(c){p(c,b.href,b.media),h[b.href]!0,a.setTimeout(function(){o()},0)})}},pfunction(a,b,c){var da.match(/media[^\{]\{([^\{\}]*\{[^\}\{]*\})/gi),gdd.length||0;bb.substring(0,b.lastIndexOf(/));var hfunction(a){return a.replace(/(url\()[]?([^\/\)][^:\)])[]?(\))/g,$1b$2$3)},i!gc;b.length(b/),i(g1);for(var j0;gj;j){var k,l,m,n;i?(kc,f.push(h(a))):(kd[j].match(/media *([^\{])\{([\S\s]?)$/)RegExp.$1,f.push(RegExp.$2h(RegExp.$2))),mk.split(,),nm.length;for(var o0;no;o)lm[o],e.push({media:l.split(()[0].match(/(only\s)?([a-zA-Z])\s?/)RegExp.$2||all,rules:f.length-1,hasquery:l.indexOf(()-1,minw:l.match(/\(\s*min\-width\s*:\s*(\s*[0-9\.])(px|em)\s*\)/)parseFloat(RegExp.$1)(RegExp.$2||),maxw:l.match(/\(\s*max\-width\s*:\s*(\s*[0-9\.])(px|em)\s*\)/)parseFloat(RegExp.$1)(RegExp.$2||)})}u()},sfunction(){var a,bc.createElement(div),ec.body,f!1;return b.style.cssTextposition:absolute;font-size:1em;width:1em,e||(efc.createElement(body),e.style.backgroundnone),e.appendChild(b),d.insertBefore(e,d.firstChild),ab.offsetWidth,f?d.removeChild(e):e.removeChild(b),atparseFloat(a)},ufunction(b){var hclientWidth,kd[h],mCSS1Compatc.compatModek||c.body[h]||k,n{},ol[l.length-1],p(new Date).getTime();if(bqip-q)return a.clearTimeout(r),ra.setTimeout(u,i),void 0;qp;for(var v in e)if(e.hasOwnProperty(v)){var we[v],xw.minw,yw.maxw,znullx,Anully,Bem;x(xparseFloat(x)*(x.indexOf(B)-1?t||s():1)),y(yparseFloat(y)*(y.indexOf(B)-1?t||s():1)),w.hasquery(zA||!(z||mx)||!(A||ym))||(n[w.media]||(n[w.media][]),n[w.media].push(f[w.rules]))}for(var C in g)g.hasOwnProperty(C)g[C]g[C].parentNodejj.removeChild(g[C]);for(var D in n)if(n.hasOwnProperty(D)){var Ec.createElement(style),Fn[D].join(\n);E.typetext/css,E.mediaD,j.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssTextF:E.appendChild(c.createTextNode(F)),g.push(E)}},vfunction(a,b){var cw();c(c.open(GET,a,!0),c.onreadystatechangefunction(){4!c.readyState||200!c.status304!c.status||b(c.responseText)},4!c.readyStatec.send(null))},wfunction(){var b!1;try{bnew a.XMLHttpRequest}catch(c){bnew a.ActiveXObject(Microsoft.XMLHTTP)}return function(){return b}}();n(),b.updaten,a.addEventListener?a.addEventListener(resize,x,!1):a.attachEventa.attachEvent(onresize,x)}})(this);
3.设置IE渲染方式默认为最高 meta http-equivX-UA-Compatible contentIEEdgechrome1chrome1,双核时默认使用chrome内核。
4.接下来就可以写CSS3媒体查询样式了 博客名称王乐平博客 博客地址http://blog.lepingde.com CSDN博客地址http://blog.csdn.net/lecepin
