bootstrap设置图片的响应式
阅读模式：
bootstrap设置图片的响应式
查看：968&
来源：php自学网&
&&&&bootstrap设置网站中内容的图片，根据屏幕的框都变化而变化，使图片也响应式，自适应起来。&&&&在图片中增加两个类 .img-responsive .center-block 。通过增加这两个样式会把图片设置成块状元素，并设置图片最大的宽度为100%，高度自动。&img&src=&路径&&class=&img-responsive&center-block&&/&&&&&如果图片在文章中插入的，为了避免每次在编辑文章的时候去增加样式，所有可以通过js的设置自动设定图片的样式。$(function(){
&&&&//当所有资源加载完后设置
&&&&$('.content&img').addClass('img-responsive&center-block');
扫描二维码手机查看
你可能喜欢:
发布评论：
推荐阅读：在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我用的是用Bootstrap相适应框架在写的，通过@media (min-width: 320px)来判断他们的宽度，但是我发现在这些取出来的都是手机自身的宽度，而不是他们的像素多少，那么走样式的话，也是根据手机自身的宽度来定的，而不是走手机的像素，请问，这问题要怎么解决，能不能获取到安卓的像素来定样式，还是说只能根据安卓手机自身的宽度来定样式。
举个例子，就是@media (min-width: 1080px)是这个屏幕自身的宽度，那么在这个宽度里面分辨率可以是600 800 920 1080，那么安卓手机也是这样，在360的宽度里面分辨率也可以是320 480 720 等等，那么像这个情况的话我应该根据像素来定样式，还是自身的宽度来定样式，那么在
Bootstrap响应式的框架里面，我只是会通过自身宽度来定要是，如果要根据分辨率来定样式的话，需要怎么来写？
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
首先，看不懂你说的像素跟手机宽度的意思。
介绍下语法吧,很简单的,简直就是一目了然:
@media screen and (max-width: 768px) {/*样式*/}
很明显 上面一条查询的 结果就是在最大分辨率为768px宽度的设备下应用以下样式.
介绍几种常用的,方便大家应用到实际中:
/***** Standard 960px *****/
@media only screen and (min-width:960px) and (max-width:1200px) {
.row { margin:0 width:960 }
/***** iPad Smaller than 959px *****/
@media only screen and (min-width: 768px) and (max-width: 959px) {
.row { margin:0 width:768 }
/***** iPhone (portrait) *****/
@media only screen and (max-width: 767px) {
.row { margin:0 width:300 }
@media only screen and (min-width: 480px) and (max-width: 767px) {
.row { margin:0 width:456 }
基本上,上面几种分辨率的设置就涵盖了目前的主流设备了.
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
boostrap 里 viewport 被设置为device-width了，所以采用 @media (min-width: 320px) 这类的移动设备实际像素值来设定样式，这是没错的，也是推荐的使用方法
给出的数值看起来是默认的viewport宽度下遵守的，min-width是大于等于，max-width是小于等于，bootstrap自身的css应该有很好的终端宽度设定，直接参考就可以了，你想要改什么？
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。怎样让bootstrap设计的页面在手机端也能响应式自适应_百度知道
怎样让bootstrap设计的页面在手机端也能响应式自适应
我有更好的答案
只要每个页面都加上这样的标签头，直接上图看效果？后来才发现凡是bootstrap设计的页面都带有标签头;meta name=&quot:& content=&width=device-width：在用bootstrap设计好页面,并在火狐浏览器上进行调试, initial-scale=1&&gt你好怎样让bootstrap设计的页面不仅在电脑浏览器是响应式在手机端也是响应式呢？也就是电脑端不同分辨率下的浏览效果跟相应分辨率下的手机端浏览效果是一样的呢？闲话少说;viewport&quot：为什么会这样呢：但是在手机端浏览的时候发现整个页面被缩小的很小？为什么bootstrap设计出来的页面样式虽然都一样,但是在手机端显示的只是整个页面都缩小而不是响应式的呢,连文字都看不清,效果图如下
为您推荐：
其他类似问题
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。bootstrap响应式网页设计的9条基本原则！用bootstrap框架能不能开发手机端页面_百度知道
用bootstrap框架能不能开发手机端页面
我有更好的答案
可以，具体内容可以搜索bootstrap的栅格系统
采纳率：80%
来自团队：
为您推荐：
其他类似问题
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。}