关于web中的自适应布局 简明范例
我的图书馆
关于web中的自适应布局 简明范例
一、”自适应网页设计”的概念
2010年，Ethan Marcotte提出了“自适应网页设计”（Responsive Web Design）--这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。
二、允许网页宽度自动调整
“自适应网页设计”到底是怎么做到的？其实并不难。
首先，在网页代码的头部，加入一行viewport元标签。
&meta name=”viewport” content=”width=device-width, initial-scale=1″ /&
viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
所有主流浏览器都支持这个设置，包括IE9。对于那些老式浏览器（主要是IE6、7、8），需要使用3-mediaqueries.。
&!–[if lt IE 9]&
&script src=”http://3-mediaqueries-./svn/trunk/3-mediaqueries.”&&/script&
&![endif]–&
三、不使用绝对宽度
由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。
具体说，代码不能指定像素宽度：
只能指定百分比宽度：
width: xx%;
四、相对大小的字体
字体也不能使用绝对大小（px），而只能使用相对大小（em）。
font: normal 100% Helvetica, Arial, sans-
上面的代码指定，字体大小是页面默认大小的100%，即16像素。
font-size: 1.5
然后，h1的大小是默认大小的1.5倍，即24像素（24/16=1.5）。
font-size: 0.875
small元素的大小是默认大小的0.875倍，即14像素（14/16=0.875）。
五、流动布局（fluid grid）
“流动布局”的含义是，各个区块的位置都是浮动的，不是固定不变的。
width: 70%;
.leftBar {
width: 25%;
float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。
另外，绝对定位（position: absolute）的使用，也要非常小心。
六、选择加载
“自适应网页设计”的核心，就是3引入的Media Query模块。
它的意思就是，自动探测屏幕宽度，然后加载相应的文件。
&link rel=”stylesheet” type=”text/”
media=”screen and (max-device-width: 400px)”
href=”tinyScreen.” /&
上面的代码意思是，如果屏幕宽度小于400像素（max-device-width: 400px），就加载tinyScreen.文件。
&link rel=”stylesheet” type=”text/”
media=”screen and (min-width: 400px) and (max-device-width: 600px)”
href=”smallScreen.” /&
如果屏幕宽度在400像素到600像素之间，则加载smallScreen.文件。
除了用html标签加载文件，还可以在现有文件中加载。
@import url(“tinyScreen.”) screen and (max-device-width: 400px);
七、的@media规则
同一个文件中，也可以根据不同的屏幕分辨率，选择应用不同的规则。
@media screen and (max-device-width: 400px) {
#sidebar {
上面的代码意思是，如果屏幕宽度小于400像素，则column块取消浮动（float:none）、宽度自动调节（width:auto），sidebar块不显示（display:none）。
八、图片的自适应（fluid image）
除了布局和文本，”自适应网页设计”还必须实现图片的自动缩放。
这只要一行代码：
img { max-width: 100%;}
这行代码对于大多数嵌入网页的视频也有效，所以可以写成：
img, object { max-width: 100%;}
老版本的IE不支持max-width，所以只好写成：
img { width: 100%; }
此外，windows平台缩放图片时，可能出现图像失真现象。这时，可以尝试使用IE的专有命令：
img { -ms-interpolation-mode: }
或者，Ethan Marcotte的imgSizer.。
addLoadEvent(function() {
var imgs = document.getElementById(“content”).getElementsByTagName(“img”);
imgSizer.collate(imgs);
馆藏&23833
TA的推荐TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&【图片】红屏要不要换 自适应不会很红别的三个模式很红怎么办【三星s8吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：60,775贴子：
红屏要不要换 自适应不会很红别的三个模式很红怎么办收藏
苏宁易购三星s8,官方授权,正品行货保证,买正品,就上苏宁易购网上商城!苏宁易购三星s8,全国联保,货到付款!
手机看不出什么
肉眼很明显 而且我的小8为什么王者荣耀没有高帧率模式
假如可以换，建议换了
都这样换台也无节操 我的也是自适应不红
我看别人都这样
这个是自适应 上面会红
我自适应都微红，不过其他挺好。想想懒得折腾了。
我的跟你的情况一样，除了1自适应其他模式很粉嫩的，然而我没换，自适应感觉还可以的
我的上红下绿，懒得折腾了
自适应不红应该换不了
三星s8-京东尖货疯狂抢「618全民年中购物节」巅峰时刻,全品类狂欢盛典,够实&惠&!品质生活,好物低价,疯抢72小时,多仓直发,急速配送,&京东618&
自适应只要不红就可以，貌似没人后面三个模式不红
自适应不红就适应一下吧，如果有时间跟售后磨也可以去换，线上就怕你换完更严重
我的自适应不红，别的选项明显红
那就自适应，为何要选择其他模式，有什么好吗
不同模式色温调教是有差别的
我就是上下红
要是我铁定换
三星给换？
我是从不同角度来看会有不同程度的泛红，准备明天去售后检测申请换机，也不知道给不给换。。
我的是右边曲面部分，一条都有点红……其他还好……
真的不用太纠结，无论你选那种模式，三星的屏幕都会根据光线调整屏幕显示效果。。。
选基本模式 然后开蓝光过滤 等个十分钟 就变白了
我也是边缘泛红，已经换机了，直接去售后出个换机单就行了
登录百度帐号推荐应用请选择您的用户帐号类型
自适应驾驶系统两模式差异明显 试君威GS
来源：搜狐汽车
作者：裴雷
第1页:动力迅猛 自适应驾驶系统两模式差别明显
第2页:内外都用更为夸张的手法体现性能车的身份
第3页:采用整车激光焊接 主被动安全防护措施完善
　　 面前这款漂亮但风格凌厉的白色轿车就是别克君威的最高性能车款—GS，上海通用能将这样一款非大众化的汽车引入国产是一件令人高兴的事情。虽然完全舍弃了海外版GS的6MT与四轮驱动系统，但较能容易让人接受的价格弥补了这两项对用户来说也许并不是很重要的遗憾之处。况且，同级中独有的FlexRide自适应驾驶系统可以让车主主观改变车辆的驾驶风格，无论从对各种路况的适应还是从提升驾驶的乐趣来讲，这项功能都是国产君威GS上最值得你去关注的。
　　于2011正式上市的售价28.39万元，比原顶配2.0T旗舰运动版多出1.4万元。虽然并非海外版的，但自适应驾驶系统的存在还是给我们带来了不少新鲜的感觉。
驾驶感受：动力迅猛 自适应驾驶系统两种状态差别明显
　　在动力总成上并没有采用海外版的2.0T高性能版发动机与6速手动的搭配，而是与在售的2.0T运动版相同。拥有162kW最大功率、Nm最大扭矩的2.0T发动机对中国的道路完全够用，6速手自一体虽然没有6速手动来的给力，但是同样考虑到中国大城市的路况以及人们的习惯，自动挡显然更为适合。
　　不过喜爱那套6MT的你也不必太过失望，上海为在后加装了一套拨片换挡装置，失去的手动挡驾驶乐趣完全可以由此找回，并且这种操作方式更像纯正的赛车。
　　在实际操作中，我们认为这套拨片系统对换挡的响应速度还是比较快的，且明显快过那些配备了拨片的日韩车型。你只需将挡把放入“M”挡，就可以轻松的通过来操作挡位的升降。
　　2.0T直喷发动机的性能相信很多朋友们都已经领教过了，虽然并没有双离合的响应迅速和平顺，但那种美式运动车独有的“唑车”感绝对会刺激你的神经，不过坐在后座的乘客可能就会感觉难受了。在不是非常拥堵的路况下，建议使用手动模式+拨片来驾驭这款，Nm的扭矩输出会很快将你的后背一直稳定在与靠背紧紧贴合的状态下。
　　重点要说的就是上独有的Ride自适应驾驶系统，驾驶员可以在运动模式、旅行模式（舒适模式）或者标准模式三种状态下进行选择，通过原C按键旁的两个小按键即可实现此强大的功能。
　　在标准模式下，这套系统能根据车速、前轮制动压力、油门踏板力度等数据清晰识别加速、爬坡、转弯等11种不同行驶工况，通过遍布于上的传感器对路面高达每秒100次的扫描精确调控悬挂状态，自动适应车主驾驶风格；Magnasteer磁力辅助随速可变助力转向系统也会循规蹈矩的使转向由轻到重。但作为车主的你，是绝对不会使用这种标准模式的，你一定会选择运动或者旅行模式来感受它们的不同。
　　在运动模式下，首先仪表背光将由蓝变红，这项在英朗1.6T上颇受青睐的纯炫酷配置如今君威GS的车主也能够享受了，他对调动你的激情也有着明显的作用。
　　实际感受中，转向明显变得很重，车头对于每一个转角的响应都很准确。同样灵敏的还有油门踏板，初段的空量明显减少，你能很清楚的听到发动机的轰鸣声与你的脚部下压处于同一时刻。在这种模式下，的换挡时刻也会延迟，全油门时不到红线不会升挡。
粗壮的铝制后悬臂是车辆操控感提升的基础，也是运动型汽车的必备。
　　我们还可以明显感觉到的还有悬挂的硬朗，所带来的直接感受就是清晰的路感，甚至一粒车轮压过一粒小石子你都能够有所察觉。配合加强的悬挂设计，你甚至在雨后的山路上行驶都会非常有信心，车辆的侧倾幅度被控制在了一个很优秀的范围中。官方数据中，在运动模式下的百公里加速成绩比2T旗舰版会快0.4秒左右，在车到来后我们会进行比对，运动模式对ESC介入的延迟作用到时也会有所体现。
　　换至旅行模式，刚才紧绷的神经终于能够得到放松。因为你手中的会突然变得有些轻盈，当然这是相对运动模式而言，毕竟245mm的胎宽在那。你会觉得打方向不再像刚才那样需要一点力气，车头的指向也稍显模糊。脚下的油门踏板初段空量加大，动力的输出迟滞感增加，很快会升至最高挡并疲于降挡以控制油耗。
在高速公路上驾驶还是比较适宜选用旅行模式，舒适感和操作的轻便性很重要
　　悬挂对于路面信息的过滤给我们的感受更深，尤其是在两种模式间快速来回切换的操作中。你会感觉刚才还是多坑洼多石子的路面突然变得平整，这是因为系统将悬挂调软过滤掉了大部分细碎的颠簸，车内乘客会得到很好的舒适性。这种模式适用于高速公路驾驶，方向不至于太过灵敏导致车辆忽左忽右，同时舒适性和经济性也得到了很好的保障。
　　在驱动方式上，同样为前置前驱，并未采用海外版的四驱系统，这应该是综合考虑价格与用户需求的平衡后做出的决定。它并不仅仅是为喜爱性能的用户所准备的纯玩性质座驾，性价比同样是他们要考虑的。
第1页:动力迅猛 自适应驾驶系统两模式差别明显
(责任编辑：裴雷)
别克君威GS相关文章
别克君威GS相关热帖
满意度：&&
实拍图片：张
评测文章：篇
级别：中型车
今日市场报价：&&
目前共有篇行情文章
君威GS的竞争车型
别克君威GS活动
相关二手车
同价位二手车
经央视3.15曝光后，大众在华宣布召回...
搜狐博客·微博
近期热点关注后使用快捷导航没有帐号？
只需一步，快速开始
查看: 4589|回复: 18
在线时间610 小时经验值538 最后登录注册时间帖子阅读权限60UID5676573
大学本科, 积分 538, 距离下一级还需 162 积分
该用户从未签到
G币924 最后登录注册时间
马上注册，结交更多机友，下载更多应用，让你轻松玩转手机。
已有帐号？　　　下载游戏和软件，请【】进入机锋市场！
本帖最后由 saw9100 于
22:22 编辑
今天 一早 京东派送才到S8 , 就迫不急待,&&最最最 关心&&红屏问题..
用水果7 在垂直角度 对着 拍,&&S8 显示的 基本模式& &“泛红” ,影院，照片模式屏幕呈现出来的也是“泛红” !!!& &但是 自适应模式还算 OK 。。。。还有 前置摄像头 自拍时,脸的颜色 也偏红, 像喝了小酒一样/
大家 请看 是否 正常!&&大家的 自适应 模式 也像我这样的吗？？？&&也有机友的“基本模式” 和我的国行“自适应模式” 一样的色调！！！ 欢迎讨论!!!
我的基本模式
11:07 上传
我的自适应模式（默认）
11:07 上传
==================================================================
于是 下午 我去了 实体店里在 垂直角度作了 对比， 左侧 是我 机子， 右边是 实体店的展示机
21:55 上传
=====================================================================
下图是 机锋S8 群里的 机友，买了两部 对比出来的 同是“ 基本模式”下， 呈现出来的颜色。 他说 要么是泛红，就是有点偏绿（惨白）色调！！看对比图
21:51 上传
================================
这是我 F& &Q出去 , 老外 看发出的 图片 关键&&S8 DISPLAY RED TINT&&问题,& &各位机友 可以对比下
12:01 上传
在线时间350 小时经验值822 最后登录注册时间帖子阅读权限70UID
学士, 积分 822, 距离下一级还需 278 积分
TA的每日心情开心 20:16签到天数: 2 天[LV.1]初来乍到
G币62 最后登录注册时间
国行&&一样
在线时间0 小时经验值20 最后登录注册时间帖子阅读权限20UID
小学生, 积分 20, 距离下一级还需 30 积分
TA的每日心情擦汗 12:09签到天数: 9 天[LV.3]偶尔看看II
G币23 最后登录注册时间
好多都这样 但是也有基本也不红的
在线时间33 小时经验值1985 最后登录注册时间帖子阅读权限90UID6800666
硕士, 积分 1985, 距离下一级还需 515 积分
TA的每日心情擦汗 21:28签到天数: 551 天[LV.9]以坛为家II
G币1716 最后登录注册时间
京东第一部是边缘红，花了几天换货，今天拿到又是阴阳屏，我也是醉了
在线时间5 小时经验值1898 最后登录注册时间帖子阅读权限90UID
硕士, 积分 1898, 距离下一级还需 602 积分
TA的每日心情开心 12:26签到天数: 151 天[LV.7]常住居民III
G币1541 最后登录注册时间
色温红调整到最低，另外至于这么纠结吗？
在线时间938 小时经验值1271 最后登录注册时间帖子阅读权限80UID553413
研究生, 积分 1271, 距离下一级还需 429 积分
该用户从未签到
G币409 最后登录注册时间
哎,我的也是,体验店买的.
在线时间0 小时经验值21 最后登录注册时间帖子阅读权限20UID
小学生, 积分 21, 距离下一级还需 29 积分
TA的每日心情开心 10:40签到天数: 10 天[LV.3]偶尔看看II
G币29 最后登录注册时间
本帖最后由 AIS8 于
19:24 编辑
自适应模式屏幕虽然白，但显示图片色彩失真。我现在用“基本”模式，屏幕只有变换角度看时有明显的粉红色，正视屏幕还好。
在线时间610 小时经验值538 最后登录注册时间帖子阅读权限60UID5676573
大学本科, 积分 538, 距离下一级还需 162 积分
该用户从未签到
G币924 最后登录注册时间
mejohnson526 发表于
京东第一部是边缘红，花了几天换货，今天拿到又是阴阳屏，我也是醉了
你这运气 该买 彩票了。。。
在线时间610 小时经验值538 最后登录注册时间帖子阅读权限60UID5676573
大学本科, 积分 538, 距离下一级还需 162 积分
该用户从未签到
G币924 最后登录注册时间
AIS8 发表于
自适应模式屏幕虽然白，但显示图片色彩失真。我现在用“基本”模式，屏幕只有变换角度看时有明显的粉红色， ...
你的 基本 模式&&会 泛红 吗？ 可否上传图 比较下
在线时间0 小时经验值6 最后登录注册时间帖子阅读权限10UID
幼儿园, 积分 6, 距离下一级还需 9 积分
该用户从未签到
G币0 最后登录注册时间
你把亮度调高试验下。
Powered by后使用快捷导航没有帐号？
只需一步，快速开始
查看: 4591|回复: 18
在线时间610 小时经验值538 最后登录注册时间帖子阅读权限60UID5676573
大学本科, 积分 538, 距离下一级还需 162 积分
该用户从未签到
G币924 最后登录注册时间
马上注册，结交更多机友，下载更多应用，让你轻松玩转手机。
已有帐号？　　　下载游戏和软件，请【】进入机锋市场！
本帖最后由 saw9100 于
22:22 编辑
今天 一早 京东派送才到S8 , 就迫不急待,&&最最最 关心&&红屏问题..
用水果7 在垂直角度 对着 拍,&&S8 显示的 基本模式& &“泛红” ,影院，照片模式屏幕呈现出来的也是“泛红” !!!& &但是 自适应模式还算 OK 。。。。还有 前置摄像头 自拍时,脸的颜色 也偏红, 像喝了小酒一样/
大家 请看 是否 正常!&&大家的 自适应 模式 也像我这样的吗？？？&&也有机友的“基本模式” 和我的国行“自适应模式” 一样的色调！！！ 欢迎讨论!!!
我的基本模式
11:07 上传
我的自适应模式（默认）
11:07 上传
==================================================================
于是 下午 我去了 实体店里在 垂直角度作了 对比， 左侧 是我 机子， 右边是 实体店的展示机
21:55 上传
=====================================================================
下图是 机锋S8 群里的 机友，买了两部 对比出来的 同是“ 基本模式”下， 呈现出来的颜色。 他说 要么是泛红，就是有点偏绿（惨白）色调！！看对比图
21:51 上传
================================
这是我 F& &Q出去 , 老外 看发出的 图片 关键&&S8 DISPLAY RED TINT&&问题,& &各位机友 可以对比下
12:01 上传
在线时间350 小时经验值822 最后登录注册时间帖子阅读权限70UID
学士, 积分 822, 距离下一级还需 278 积分
TA的每日心情开心 20:16签到天数: 2 天[LV.1]初来乍到
G币62 最后登录注册时间
国行&&一样
在线时间0 小时经验值20 最后登录注册时间帖子阅读权限20UID
小学生, 积分 20, 距离下一级还需 30 积分
TA的每日心情擦汗 12:09签到天数: 9 天[LV.3]偶尔看看II
G币23 最后登录注册时间
好多都这样 但是也有基本也不红的
在线时间33 小时经验值1985 最后登录注册时间帖子阅读权限90UID6800666
硕士, 积分 1985, 距离下一级还需 515 积分
TA的每日心情擦汗 21:28签到天数: 551 天[LV.9]以坛为家II
G币1716 最后登录注册时间
京东第一部是边缘红，花了几天换货，今天拿到又是阴阳屏，我也是醉了
在线时间5 小时经验值1898 最后登录注册时间帖子阅读权限90UID
硕士, 积分 1898, 距离下一级还需 602 积分
TA的每日心情开心 12:26签到天数: 151 天[LV.7]常住居民III
G币1541 最后登录注册时间
色温红调整到最低，另外至于这么纠结吗？
在线时间938 小时经验值1271 最后登录注册时间帖子阅读权限80UID553413
研究生, 积分 1271, 距离下一级还需 429 积分
该用户从未签到
G币409 最后登录注册时间
哎,我的也是,体验店买的.
在线时间0 小时经验值21 最后登录注册时间帖子阅读权限20UID
小学生, 积分 21, 距离下一级还需 29 积分
TA的每日心情开心 10:40签到天数: 10 天[LV.3]偶尔看看II
G币29 最后登录注册时间
本帖最后由 AIS8 于
19:24 编辑
自适应模式屏幕虽然白，但显示图片色彩失真。我现在用“基本”模式，屏幕只有变换角度看时有明显的粉红色，正视屏幕还好。
在线时间610 小时经验值538 最后登录注册时间帖子阅读权限60UID5676573
大学本科, 积分 538, 距离下一级还需 162 积分
该用户从未签到
G币924 最后登录注册时间
mejohnson526 发表于
京东第一部是边缘红，花了几天换货，今天拿到又是阴阳屏，我也是醉了
你这运气 该买 彩票了。。。
在线时间610 小时经验值538 最后登录注册时间帖子阅读权限60UID5676573
大学本科, 积分 538, 距离下一级还需 162 积分
该用户从未签到
G币924 最后登录注册时间
AIS8 发表于
自适应模式屏幕虽然白，但显示图片色彩失真。我现在用“基本”模式，屏幕只有变换角度看时有明显的粉红色， ...
你的 基本 模式&&会 泛红 吗？ 可否上传图 比较下
在线时间0 小时经验值6 最后登录注册时间帖子阅读权限10UID
幼儿园, 积分 6, 距离下一级还需 9 积分
该用户从未签到
G币0 最后登录注册时间
你把亮度调高试验下。
Powered by