美文网首页
设计自适应不同屏幕大小的网页(2)

设计自适应不同屏幕大小的网页(2)

作者: nasy | 来源:发表于2016-04-28 09:08 被阅读0次

这星期开发项目时准备使用媒体查询的方式设计自适应网站,不过最后放弃了,总结了以下几点来说明什么情况下不适合设计自适应网站。

  • div有背景图片:这种情况下是不适合设计自适应网页。虽然可以通过下面的样式可以使得背景图片自适应,但是块里显示的其他内容就不好自适应了。所以整个页面这种情况占据很多的时候就慎用设计自适应网站,还是老实的定义好div宽度跟高度。(排除body用背景图片的状况)

    -moz-background-size: 100% 100%;
    background-size: 100% 100%;
    
  • 过多使用绝对定位:这种情况也要慎用自适应网站,自适应网站的原理通过改变屏幕大小而改变文档的显示位置,而绝对定位则与这种原理相排斥,虽然也能通过一些特殊的设定达到自适应,但是还是有许多的不足之处,所以不推荐。

相关文章

  • 设计自适应不同屏幕大小的网页(2)

    这星期开发项目时准备使用媒体查询的方式设计自适应网站,不过最后放弃了,总结了以下几点来说明什么情况下不适合设计自适...

  • 自适应和响应式的区别

    自适应:同一张网页适应不同设备分辨率及屏幕大小 响应式:根据设备大小显示不同的网页

  • 设计自适应不同屏幕大小的网页(1)

    最近在做手机版网页,碰到了挺多的问题,不同屏幕大小不一样,分辨率不一样,都会导致最终网页显示的结果不一样,这里记录...

  • 自适应网站

    什么是自适应网站? 指的是网页通过不同尺寸不同终端设备访问可以自适应显示,根据屏幕大小、宽度自动调整布局,自适应也...

  • HTML5 中的 picture 元素响应式处理图片

    响应式设计 所谓的响应式设计,是指在不同的屏幕分辨率,不同的像素密度比,不同宽度的终端设备中,网页布局可以自适应的...

  • 重点

    考虑尺寸大小和屏幕分辨率网站设计基准: 设计区/画布大小按钮 18-20浏览器高度120以内自适应3套不同的尺寸...

  • 工作总结

    11.12 (一)自适应网站是要让网页在各种大小不同的屏幕上和主流浏览器上都能保持良好的视觉和交互效果。根据这次开...

  • 小程序Canvas图片自适应、文字自适应、canvas图片导出不

    自适应图片大小、位置自定义文字大小、位置自适应核心:获取屏幕像素,用该像素转换成和设计稿对等的rem,每次设置大小...

  • iOS - Swift自定义UIFont字号自适应屏幕

    【Swift】自定义UIFont字号自适应屏幕 为方便项目中统一调用不同的字号,及字号大小自适应屏幕,对UIFon...

  • 自适应网页的实现

    1.自适应网页设计 2010年,Ethan Marcotte提出了"自适应网页设计"(Responsive Web...

网友评论

      本文标题:设计自适应不同屏幕大小的网页(2)

      本文链接:https://www.haomeiwen.com/subject/fcycrttx.html