标签: responsive-design

我发现调整图像大小以使其响应变得棘手.

我正在开发一个php应用程序来自动将网站转换为响应版本.我有点卡在图像上.

我已经成功地为网站上的每个图像添加了一个包装类,并且可以很好地重新调整图像的大小.

我的问题在于自然比窗口小的图像,例如徽标和图标.我不想调整这些.

我的代码目前转换为:

<img src="[src]" />

成:

<div class="erb-image-wrapper">
    <img src="[src]" />
</div>

我在哪里使用以下CSS:

.erb-image-wrapper{
    max-width:90%;
    height:auto;
    position: relative;
    display:block;
    margin:0 auto;
}
.erb-image-wrapper img{
    width:100% !important;
    height:100% !important;
    display:block;
}

这会调整所有图像的大小,但我只希望它调整超出页面宽度的图像.这是我通过CSS实现这一目标的方式吗？

所以我正在开发我的第一个响应式网站,该网站广泛使用媒体查询.我想知道是否有一些我应该优化的常见页面宽度.

我可能会有一个最大宽度(没有完全流畅)我想我可能有3-5个设置宽度,它们之间有趣的小CSS3过渡(类似于CSS Tricks的工作方式).

目前我使用的数字有些随意:

@media all and (max-width: 599px){...}
@media all and (min-width: 600px) and (max-width:799px){...}
@media all and (min-width: 800px) and (max-width:1024px){...}
@media all and (min-width: 700px) and (max-width: 1024px){...}
@media all and (min-width: 1025px) and (max-width: 1399px){...}
@media all and (min-width: 1400px){...}

另外,我想我已经读过一些移动设备没有按预期运行(有@media).这在哪里发挥作用,我应该如何处理这些情况？

移动屏幕尺寸有很多不同的媒体查询.在设计响应式移动网站时,容纳所有这些内容可能会令人难以招架.在设计移动设备时,哪些是最重要的？我发现这篇文章可以很好地概述可用的媒体查询:http://css-tricks.com/snippets/css/media-queries-for-standard-devices/.

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) …

我正在尝试测试响应式设计.我正在使用Rails 4.我知道它将'X-Frame-Options'设置为SAME ORIGIN.所以我在development.rb中使用了

config.action_dispatch.default_headers = {
    'X-Frame-Options' => 'ALLOWALL'
  }

它起作用了.我在Chrome控制台中查看了网络请求,内容如下:

但仍然像responsive.is和responsinator.com这样的网站给我以下错误:

Refused to display 'http://localhost:3000/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. about:blank:1

这是怎么回事？？

我正在使用bootstrap 3表,当我把大文本放在表格中时,它会被包裹在几行上,但是我希望它以一个响应的方式在末尾截断三个点,而不会弄乱表格的布局(我找到一些解决方案,但有不愉快的影响).

那可能吗 ？怎么样 ？

PS:欢迎任何解决方案,但我希望它只是HTML/CSS,如果可能的话.

Ionic是使用html5开发移动应用程序的一个很好的框架.我们也希望在桌面浏览器上使用相同的应用程序.制作一个在桌面浏览器和移动浏览器上都能发挥最佳效果并制作应用程序的响应式用户界面是否是个好主意.或者我们应该为浏览器和移动应用程序进行不同的开发

我有一个表来表示我的html页面中的一些数据.我正在尝试使这个表格具有响应性.我怎样才能做到这一点 ？

这是Demo.

我的最终目标是<img>使用仅使用css 的流体不会扩展超过父/祖父元素的显式设置高度.

目前我正在使用normal(max-width:100; height:auto;)流体图像和javascript通过从img标签读取高度/宽度属性,计算纵横比,在所需高度限制下计算图像的正确宽度,并将该宽度应用为a max-width在图像的容器元素上.很简单,但我很乐意能够在没有javascript的情况下完成它.

height:100%; width:auto;它的横向效果不一样,我已经尝试过使用Unc Dave的ol'填充框和绝对定位功能,但需要预先知道图像的纵横比,因此无法应用于具有不同比例的图像.所以最后的要求是css必须与比例无关.

我知道,我知道,这个问题的答案可能就是坐在麒麟农场旁边,但我想我还是会把它扔出去.

我通常使用一个类似的解决方案,这一项.就像是:

.wrapper {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 33%;
}
.wrapper iframe {
   position:absolute;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
}

但这次我无法访问HTML或JavaScript代码,因此我无法使用包装器来阻止height:0.

有没有办法让iframe响应(并保持比例)只有CSS？

试过这个(与iframe一起使用但不与其内容一起使用):

iframe {
    width: 100%;
    background: red;
    height: 0;
    padding-bottom: 33%;    
}

小提琴

有什么想法吗？无需支持旧浏览器,因此即使是CSS3解决方案也会很棒.

我的网站右侧栏中有2个(300x250)Adsense广告单元

我使网站响应迅速,并将这些广告单元替换为Adsense响应式广告单元.

我现在的问题是,Adsense现在提供2 x(300x600)广告单元.Adsense TOS声明您每页只能投放1(300x600)个广告单元

最大宽度显然会被adsense响应式广告单元所吸引.

但是,当我尝试将父div的最大高度设置为250px时,为了限制每页300x600的广告数量,最大高度会被忽略,而adsense仍会显示300x600

是否有其他人遇到此问题,如果是,您是如何设置响应广告单元的最大高度的？

提前致谢,

凯斯