• 股市跌得再狠,照样削尖脑袋想去圈钱,不宰股民真是白不宰。资本大佬甚至哀叹,进不了股市成了人生最大失败[木乃伊] 2019-08-18
  • 2019年篮球世界杯预选赛 2019-08-16
  • 凤凰网青岛专栏宫大伟:父亲节《忆父亲》,追忆殷殷父子情 2019-08-13
  • 世界杯首日综述:俄罗斯喜获开门红 罗纳尔多现身开幕式 2019-08-12
  • [鄙视]一边玩去,咱连羞辱你的兴趣都没有了! 2019-08-11
  • 华东地区海空联合演练载200人客机坠海 直升机出动 2019-08-10
  • 人民日报评论员:毫不动摇把党建设得更加坚强有力 2019-08-09
  • 人民日报一线视角:扩展城市集聚效应 推动高质量发展 2019-08-09
  • 老一辈革命家与新中国体育 2019-08-07
  • 中方有力回击!美国多个行业喊痛:“加征关税就是对美国消费者征税” 2019-08-07
  • 准确的说,日本是美国的殖民地国家。 2019-07-25
  • 家装行业猫腻多:“低价全包”变身“加价全包” 2019-07-24
  • 雄安高质量发展应树立高质量标杆 2019-07-24
  • 回复@真理论者:你天天在强坛攻击爱因斯坦是不是劳动?创造价值么?负价值也! 2019-07-21
  • 这家工厂智能制造有魅力!记者探营创维彩电智能工厂 2019-07-21
  • NEXT
    PREV
    您现在的位置:首页/知识中心

    浙江11选5基本走势图:什么是自适应网页设计,响应式Web设计

    文章作者:道成科技发布时:2014-10-26点击:2460次

    吉林11选五走势图 www.z10gm.com 现在移动互联网越来越热,用手机上网的人数大量增加。现在大家常用的手机的屏幕通常在600像素以下,PC的屏幕宽度一般都在1000-2000像素。同样的内容,要在大小迥异的屏幕上,都呈现出满意的效果,并不是一件容易的事。 很多网站的解决方法,是为不同的设备提供不同的网页,比如专门提供一个手机版本,或者iPhone / iPad版本。这样做固然保证了效果,但是比较麻烦,同时要维护好几个版本,会大大增加架构设计的复杂度。 于是,很早就有人设想,能不能”一次设计,普遍适用”,让同一张网页自动适应不同大小的屏幕,根据屏幕宽度,自动调整布局?

    2010年,Ethan Marcotte提出了“自适应网页设计”(Responsive Web Design)这个名词概念,这个自适应设计就是可以自动识别屏幕宽度、并做出相应调整的网页设计。保证了用户在不同终端浏览网页的兼容效果。

    响应式 Web 设计工作原理:

    为了应用响应式 Web 设计,您需要创建一个包含适应各种设备尺寸样式的 CSS。一旦页面在特定的设备上加载,该页面上使用了各种字体和 Web 开发技术,比如媒体查询(Media Queries),此时,会先检测设备的视口大小,然后加载特定于设备的样式。

    响应式网站设计的CSS3代码原理:

    现在在响应式 CSS 文件中必须有 '@media' 开始的样式。

    '@media (max-width: 480px)' 开始,为最大宽度为 480 像素的设备设置样式

    '@media (max-width: 767px)' 开始,为最大宽度为 767像素的设备设置样式。

    '@media (min-width: 768px) 和 (max-width: 979px)' 开始,为最大宽度为 768 像素和最大宽度为 979 像素的设备设置样式。

    '@media (max-width: 979px)'

    最后两个区域分别以 '@media (min-width: 980px)' 和 '@media (min-width: 1200px)' 开始,前一个是为最小宽度为 980 像素的设备设置样式,后一个是为最小宽度为 1200 像素的设备设置样式。

    在PC端显示效果:

    在手机移动端显示效果:

    您可以用不同的终端来打开我公司网站。域名:www.daowweb.cn,一看和测试就明白了。也可以在PC 上拖动浏览器窗口,改变浏览器的宽度大小来测试体验。

    0
  • 股市跌得再狠,照样削尖脑袋想去圈钱,不宰股民真是白不宰。资本大佬甚至哀叹,进不了股市成了人生最大失败[木乃伊] 2019-08-18
  • 2019年篮球世界杯预选赛 2019-08-16
  • 凤凰网青岛专栏宫大伟:父亲节《忆父亲》,追忆殷殷父子情 2019-08-13
  • 世界杯首日综述:俄罗斯喜获开门红 罗纳尔多现身开幕式 2019-08-12
  • [鄙视]一边玩去,咱连羞辱你的兴趣都没有了! 2019-08-11
  • 华东地区海空联合演练载200人客机坠海 直升机出动 2019-08-10
  • 人民日报评论员:毫不动摇把党建设得更加坚强有力 2019-08-09
  • 人民日报一线视角:扩展城市集聚效应 推动高质量发展 2019-08-09
  • 老一辈革命家与新中国体育 2019-08-07
  • 中方有力回击!美国多个行业喊痛:“加征关税就是对美国消费者征税” 2019-08-07
  • 准确的说,日本是美国的殖民地国家。 2019-07-25
  • 家装行业猫腻多:“低价全包”变身“加价全包” 2019-07-24
  • 雄安高质量发展应树立高质量标杆 2019-07-24
  • 回复@真理论者:你天天在强坛攻击爱因斯坦是不是劳动?创造价值么?负价值也! 2019-07-21
  • 这家工厂智能制造有魅力!记者探营创维彩电智能工厂 2019-07-21
  • 山西快乐十分 单机五子棋免费下载 捷报比分足球即时比分 北京市福彩快三开奖走势图 天吉彩票论坛手机版一 新时时彩遗漏统计软件 江苏快三号码图 黑白花纹图片素材 广东福利快乐一定牛走势图 湖北11选5技巧与方法 河南泳坛夺金怎么玩 广西十一选五开奖直播 中国福利彩票双色球开奖公告 江苏时时彩玩法 贵州11选5前3走势图