使用bootstrap框架,当引入响应式CSS自适应屏幕大小时,采取啥措施保持页面原来栅格系统的940px的宽度,而不会变“宽”,避免940px的banner大图发生偏移

响应式设计的要义是要在屏幕大小变化时做到兼容,你这个图片应该在屏幕大小变化时候hold住不变吧。解决方案:在img加上样式max-width:100%;,图片就会跟着container的大小变化。当然前提是你图片本身要符合container的比例。参见http://webdesignerwall.com/demo/adaptive-design/final.html
■网友
我想到的办法就是将3种都设成一样,或者将不需要的注释,重新编译// Small screen / tablet@container-tablet: ((940px + @grid-gutter-width));//** For `@screen-sm-min` and up.@container-sm: @container-desktop;// Medium screen / desktop// @container-desktop: ((940px + @grid-gutter-width));//** For `@screen-md-min` and up.// @container-md: @container-desktop;// Large screen / wide desktop@container-large-desktop: ((940px + @grid-gutter-width));//** For `@screen-lg-min` and up.@container-lg: @container-desktop;
■网友
@media(max-width:480px) @media(max-width:767px)@media(min-width:768px) and (max-width:979px) @media(max-width:979px)@media(min-width:980px) @media(min-width:1200px)在bootstrap-responsive.min.css中删除或隐藏@media(min-width:1200px) 的设置即可。


    推荐阅读