好!欢迎访问迷津渡口 现在时间是: 天气 °C ~ °C

迷津渡口

越感到迷惑 越接近真理

如何编写自适应网页?viewport和@media screen

访客的客户端各不相同,可能是超过2560像素的大屏幕,也可能只是640像素的小小手机屏幕。

分辨率和屏幕的大小影响着用户的需求,仅用一种风格的网页会导致某些用户糟糕的浏览体验。

如何在网页设计之初就保证网页适合各种客户端呢?这就是自适应的理念。

自适应的网页有两种风格:

一种是简单利用设备宽度作为参数配置网页的方法;

另一种是用CSS3引入的MediaQuery模块@media分档配置CSS。

第一种方法:设备宽度为参数配置网页

这种方法首先在网页代码的头部,加入一行viewport元标签。

<meta name="viewport" content="width=device-width,initial-scale=1" />

viewport是网页默认的宽度和高度。上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。


为了使网页根据屏幕宽度调整布局,一切涉及大小和宽度最好都不使用绝对值。

如宽度用百分比或者auto,字体大小用相对值和百分比或em单位等,切忌使用 px 等绝对值。

body {width:auto;font: normal 100% sans-serif;}

上面的代码指定,body宽度自动匹配,字体大小是页面100%的normal大小,即一般为16像素。


流动布局(fluid grid)也是自适应的重要工具。

"流动布局"的含义是,各个区块的位置都是浮动的,不是固定不变的。

.content {float: left;width: 70%; }
.sideBar {float: right;width: 25%;}

float的好处是,如果宽度太小,放不下两个元素,后面的元素会自动滚动到前面元素的下方,不会在水平方向overflow(溢出),避免了水平滚动条的出现。

第二种方法:用CSS3引入的MediaQuery模块@media分档配置CSS

实际上,CSS3出现之前,自适应网页设计概念不太明确,使用上面的几种方法是远远不足以完成一个完美的自适应网页的,直到CSS3引入MediaQuery模块。

使用@media,网页可以自动探测屏幕宽度,然后加载相应的CSS属性或文件。

如此一来,我们可以精确的为每个主流宽度的设备编写CSS文件,而也可以直接使用绝对值。

但是,小指推荐仍旧使用上面的几种方法配合完成自适应网页的编写,可以减少很多工作,特别是流动布局。


利用@media我们可以在一个CSS文件配置多个基准,可以使用min-width和max-width对或者min-device-width和max-device-width对。max/min-device-width代表的是设备的最大最小分辨率,max/min-width代表的是显示器的最大最小分辨率,推荐使用后者,更精确,访客缩小浏览器大小也可以自适应。


用min-width时,小的放上面大的在下面,同理如果是用max-width那么就是大的在上面,小的在下面,否则会造成覆盖和重复检测的问题。

使用min-width:

//>=768的设备 
@media (min-width: 768px){ body {font-size:12px;}}
//>=992的设备 
@media (min-width: 992px){ body {font-size:14px;}}
//>=1200的设备
@media (min-width: 1200px){  body {font-size:16px;}}

使用max-width:

//<=1199的设备 
@media (max-width: 1199px){ body {font-size:16px;}}
//<=991的设备
@media (max-width: 991px){  body {font-size:14px;}}
//<=767的设备
@media (max-width: 767px){  body {font-size:12px;}}

当然你也可以使用精确区间:

//>=768且<=1199的设备
@media (min-width: 768px) and (max-width: 1199px){  body {font-size:14px;}}

或者规定设备如screen或者print等:

//>=768且<=1199的屏幕设备
@media screen and (min-width: 768px) and (max-width: 1199px){  body {font-size:14px;}}

如果项目非常复杂,更好的方法是不同分辨率的CSS文件分开放置:

<link rel="stylesheet" type="text/css"media="screen and (max-device-width:480px)"href="tinyScreen.css" />

上面的代码意思是,如果屏幕宽度小于400像素(max-device-width: 400px),就加载tinyScreen.css文件。

<link rel="stylesheet" type="text/css"media="screen and (min-width: 480px)and (max-device-width: 600px)"href="smallScreen.css" />

如果屏幕宽度在400像素到600像素之间,则加载smallScreen.css文件。


小指搜集和整理的资料大概就是这些,你可以自己试试哦~

测试时使用min-width或者max-width可以缩放浏览器查看效果。

如果文章对你有用,小指将非常开心^_^

点赞4
   支持一下
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
 点赞
 签到
 表情
 图片
 代码
提交评论

清空信息
关闭评论
cakeeaterspgh
 cakeeaterspgh 约 16 小时前回复
#87
<a href="http://www.opendekalbinc.com/crimson-tide-30-donot-hightower-red-stitched-ncaa-jersey-nflz">crimson tide 30 donot hightower red stitched ncaa jersey</a> <a href="http://www.playhousecash.com/nike-dunk-sky-hi-negro-volt-obuve">nike dunk sky hi negro volt</a> <a href="http://www.realcoolclub.com/roshe-run-rojo-and-blanco-amarillo-scarped">roshe run rojo and blanco amarillo</a> <a href="http://www.sfgchina.com/nike-hyperrev-2016-grau-movie-kurpesc">nike hyperrev 2016 grau movie</a> <a href="http://www.synergysimple.com/limited-nike-white-youth-durham-smythe-road-jersey-nfl-46-miami-dolphins-vapor-untouchable-nflr">limited nike white youth durham smythe road jersey nfl 46 miami dolphins vapor untouchable</a> <a href="http://www.xpressvod.com/nike-air-max-90-vt-himmelen-bl%C3%A5-gr%C3%A5-butyg">nike air max 90 vt himmelen bl氓 gr氓</a>
cakeeaterspgh http://www.cakeeaterspgh.com/
kellyalberto
 kellyalberto 2019-02-13 16:29回复
#86
<a href="http://www.alpigap.com/nike-air-max-goadome-maschio-urban-boots-obuvc">nike air max goadome maschio urban boots</a> <a href="http://www.dinerwareslo.com/maschio-nike-air-huarache-nm-nero-arancia-scarpea">maschio nike air huarache nm nero arancia</a> <a href="http://www.eskortpu.com/kvinders-nike-sb-stefan-janoski-max-alle-gr%C3%A5-chaussuresf">kvinders nike sb stefan janoski max alle gr氓</a> <a href="http://www.maribrairie.com/nike-air-max-90-flyknit-multicolor-femmes-kurpese">nike air max 90 flyknit multicolor femmes</a> <a href="http://www.myfaccia.com/nike-free-flyknit-4.0-dam%C3%A4nner-gold-rot-obuva">nike free flyknit 4.0 dam盲nner gold rot</a> <a href="http://www.noteablepost.com/ralph-lauren-men-big-pony-puffer-jacket-polot">ralph lauren men big pony puffer jacket</a>
kellyalberto http://www.kellyalberto.com/
marjalfun
 marjalfun 2019-02-13 10:17回复
#85
<a href="http://www.yeliseeva.com/air-jordan-retro-5-gull-svart-obuvk">air jordan retro 5 gull svart</a> <a href="http://www.miembrojr.com/mennns-air-max-90-em-bl%C3%A5-svart-obuvi">mennns air max 90 em bl氓 svart</a> <a href="http://www.faridekhalaf.com/nike-roshe-run-jacquard-negro-zapatosk">nike roshe run jacquard negro</a> <a href="http://www.rawbiofast.com/coach-shoes-mens-coach-new-york-dress-shoes-coachh">coach shoes mens coach new york dress shoes</a> <a href="http://www.mabarrel.com/air-jordan-retro-18-red-grey-shoesj">air jordan retro 18 red grey</a> <a href="http://www.almarsecurity.com/air-jordan-retro-7-hvid-gr%C3%B8n-skoq">air jordan retro 7 hvid gr酶n</a>
marjalfun http://www.marjalfun.com/
pennywave
 pennywave 2019-02-12 09:14回复
#84
<a href="http://www.evolutionecig.com/cincinnati-reds-hat-orange-hata">cincinnati reds hat orange</a> <a href="http://www.georginabauer.com/air-max-1-metallic-liquid-metal-runninge">air max 1 metallic liquid metal</a> <a href="http://www.bootsoffprice.com/nike-cortez-classic-pelle-og-schuhea">nike cortez classic pelle og</a> <a href="http://www.theprintjobs.com/kvinders-mizuno-wave-prophecy-s%C3%B8lv-himmelbl%C3%A5-scarpeb">kvinders mizuno wave prophecy s酶lv himmelbl氓</a> <a href="http://www.dbajournal.com/nike-air-max-2019-green-uk-shoeso">nike air max 2019 green uk</a> <a href="http://www.procomedian.com/air-jordan-4-retro-blanc-rouge-noir-kurpesc">air jordan 4 retro blanc rouge noir</a>
pennywave http://www.pennywave.com/
agivlar
 agivlar 2019-02-12 02:59回复
#83
<a href="http://www.danceaution.com/kd-8-bl%C3%A5-and-hvid-chaussurese">kd 8 bl氓 and hvid</a> <a href="http://www.nunbori.com/nike-air-foamposite-one-electric-gr%C3%B8n-sort-butyg">nike air foamposite one electric gr酶n sort</a> <a href="http://www.pampressions.com/nike-free-ace-triple-schwarz-scarpea">nike free ace triple schwarz</a> <a href="http://www.scmvietnam.com/kyrie-1-arancia-and-bianca-insect-schuhec">kyrie 1 arancia and bianca insect</a> <a href="http://www.wearspeedbird.com/herre-nike-roshe-yeezy-boost-lilla-guld-butyf">herre nike roshe yeezy boost lilla guld</a> <a href="http://www.zeromonopolio.com/nike-air-max-2015-ni%C3%B1os-blanco-gris-butyf">nike air max 2015 ni帽os blanco gris</a>
agivlar http://www.agivlar.com/
dkstekstil
 dkstekstil 2019-02-10 14:23回复
#82
<a href="http://www.tmzred.com/adidas-neo-high-s%C3%B8lv-oransje-obuvi">adidas neo high s酶lv oransje</a> <a href="http://www.alcovozov.com/air-jordan-retro-12-verde-argento-scarpej">air jordan retro 12 verde argento</a> <a href="http://www.ahmztradefx.com/air-jordan-retro-1-womens-orange-green-shoesh">air jordan retro 1 womens orange green</a> <a href="http://www.isampled.com/air-jordan-retro-12-brojo-cielo-azul-zapatosp">air jordan retro 12 brojo cielo azul</a> <a href="http://www.aldervets.com/nike-zoom-structure-20-mujeres-cielo-azul-verde-zapatosk">nike zoom structure 20 mujeres cielo azul verde</a> <a href="http://www.vanltl.com/north-face-gore-tex-paclite-jacket-northfaceh">north face gore tex paclite jacket</a>
dkstekstil http://www.dkstekstil.com/
asinagaojisan
 asinagaojisan 2019-02-10 07:30回复
#81
<a href="http://www.malagakizomba.com/adidas-golden-knights-21-cody-eakin-camo-authentic-2017-veterans-day-stitched-nhl-jersey-nflz">adidas golden knights 21 cody eakin camo authentic 2017 veterans day stitched nhl jersey</a> <a href="http://www.maximephilips.com/nike-huarache-iv-turf-zapatos-obuvd">nike huarache iv turf zapatos</a> <a href="http://www.praxispusch.com/nike-kobe-9-challenge-r%C3%B8d-scarpec">nike kobe 9 challenge r酶d</a> <a href="http://www.raiedumacon.com/air-jordan-12-retro-rojo-kitchen-kurpesb">air jordan 12 retro rojo kitchen</a> <a href="http://www.trickyourride.com/nike-youth-tavon-wilson-limited-olive-jersey-detroit-lions-nfl-32-2017-salute-to-service-nflr">nike youth tavon wilson limited olive jersey detroit lions nfl 32 2017 salute to service</a> <a href="http://www.usuariobacano.com/nike-roshe-flyknit-wolf-gris-negro-blanco-butyg">nike roshe flyknit wolf gris negro blanco</a>
asinagaojisan http://www.asinagaojisan.com/
yurasmirnov
 yurasmirnov 2019-02-09 08:50回复
#80
<a href="http://www.mandydugan.com/adidas-damian-lillard-purple-shoesh">adidas damian lillard purple</a> <a href="http://www.dxnkofe.com/adidas-forum-mid-amarillo-oro-zapatosp">adidas forum mid amarillo oro</a> <a href="http://www.yurasmirnov.com/adidas-neo-leisure-blanco-zapatosk">adidas neo leisure blanco</a> <a href="http://www.blovese.com/womens-north-face-apex-bionic-jacket-northfaceh">womens north face apex bionic jacket</a> <a href="http://www.ztsurfboards.com/nike-lebron-12-lila-rot-schuhej">nike lebron 12 lila rot</a> <a href="http://www.visheshcap.com/nike-zoom-structure-19-kvinders-gul-r%C3%B8d-skoh">nike zoom structure 19 kvinders gul r酶d</a>
yurasmirnov http://www.yurasmirnov.com/
lapthelakes
 lapthelakes 2019-02-08 07:49回复
#79
<a href="http://www.agichipay.com/jual-nike-flyknit-roshe-run-cheat-runningf">jual nike flyknit roshe run cheat</a> <a href="http://www.millsbulb.com/zdeno-chara-33-boston-bruins-reebok-premier-alternate-jersey-small-nflv">zdeno chara 33 boston bruins reebok premier alternate jersey small</a> <a href="http://www.hamshrd.com/nike-blazer-mens-black-green-trainersa">nike blazer mens black green</a> <a href="http://www.lroyroofing.com/kvinners-salomon-s-lab-sense-gul-lilla-scarped">kvinners salomon s lab sense gul lilla</a> <a href="http://www.golfbodyshop.com/jordan-1-r%C3%B8d-svart-gr%C3%A5-kurpesd">jordan 1 r酶d svart gr氓</a> <a href="http://www.yufnsyb.com/ray-ban-rb3025-original-aviator-jack-sunglassesd">ray ban rb3025 original aviator jack</a>
[url=http://www.lapthelakes.com/]lapthelakes[/url]
cnovas
 cnovas 2019-02-08 03:40回复
#78
<a href="http://www.theislandbody.com/nike-kd-9-green-sky-blue-shoesj">nike kd 9 green sky blue</a> <a href="http://www.zululeads.com/kvinders-nike-air-max-90-vt-bl%C3%A5-gr%C3%B8n-skop">kvinders nike air max 90 vt bl氓 gr酶n</a> <a href="http://www.notmyrichie.com/air-jordan-retro-3-oransje-mint-gr%C3%B8nn-obuvk">air jordan retro 3 oransje mint gr酶nn</a> <a href="http://www.mintyschoice.com/mens-nike-flyknit-lunar-1-gold-purple-shoesi">mens nike flyknit lunar 1 gold purple</a> <a href="http://www.mamapjblog.com/herre-asics-gel-kayano-21-appelsin-lilla-skoj">herre asics gel kayano 21 appelsin lilla</a> <a href="http://www.pdfunicorn.com/nike-air-max-90-svart-wolf-gr%C3%A5-obuvi">nike air max 90 svart wolf gr氓</a>
cnovas http://www.cnovas.com/
顶部留言底部
 00:00/00:00
我想和你虚度时光 - 花房姑娘(9)
  1. 我想和你虚度时光
  2. 花房姑娘
  3. 恋恋风尘
  4. 我喜爱一切不彻底的事物
  5. 我的心里是满的
  6. Long Way
  7. 给少年的歌
  8. 晴日共剪窗
  9. 天上的月你的脸