Question

在我的网站上，当我用手机输入时，响应式CSS无效。我认为这与CSS代码或if (!Schema.Table("MyTable").Something().Exists) Insert.IntoTable("MyTable").Row(new { Id = 100, Field="Value" });有关。如果我使用计算机输入，则可以正确看到该帖子，但是当我使用iPhone 7输入时，响应式CSS无效。

此链接是存在问题的图片： image1 image2

这是我完成的代码：

'

padding

好莱坞山当代

                            <div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
                <div id="portfolio-post-4594" class="portfolio-column portfolio-post portfolio-hover-style-1 all casa-nueva  width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
                        <div class="portfolio-content-container">
                            <div class="portfolio-thumbnail">
                                <img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-850_3591.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">                                </div> 
                            <div class="portfolio-caption-content">
                                <a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/casa-nueva/" target="_self"></a>
                                <div class="portfolio-content-inner">
                                    <div class="portfolio-content-details">
                                        <h5 class="portfolio-title"><a href="https://www.pampacasastaging.com/portfolio/casa-nueva/" target="_self">Casa Nueva</a></h5>                                        </div>
                                                                        </div>
                            </div>
                        </div>
                                                </div>                        <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
                                </div>
                        </div>
    </div><!-- #main -->
</div><!-- #primary -->

Oakmore Bvld。

                            <div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
                <div id="portfolio-post-4640" class="portfolio-column portfolio-post portfolio-hover-style-1 all oakmoreroad  width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
                        <div class="portfolio-content-container">
                            <div class="portfolio-thumbnail">
                                <img width="720" height="720" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/720x720-SERVICES-bedroom3-9545OakmoreRoad.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">                                </div> 
                            <div class="portfolio-caption-content">
                                <a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/oakmoreroad/" target="_self"></a>
                                <div class="portfolio-content-inner">
                                    <div class="portfolio-content-details">
                                        <h5 class="portfolio-title"><a href="https://www.pampacasastaging.com/portfolio/oakmoreroad/" target="_self">oakmoreroad</a></h5>                                        </div>
                                                                        </div>
                            </div>
                        </div>
                                                </div>                        <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
                                </div>
                        </div>
    </div><!-- #main -->
</div><!-- #primary -->

菲洛山大道（Philo Hills Blvd）。

                            <div class="row portfolio-row ignore-thumbnail-settings" data-grid="fitRows" data-posttype-autoplay="true" data-posttype-autoplay-timeout="4000" data-posttype-autoplay-speed="700" data-posttype-autoplay-hover="true" data-posttype-loop="true" data-posttype-pagination="true" data-posttype-navigation="false" data-rtl="false">
                <div id="portfolio-post-4688" class="portfolio-column portfolio-post portfolio-hover-style-1 all philo  width1x height1x col-xs-12 col-sm-12 col-md-12" style="">
                        <div class="portfolio-content-container">
                            <div class="portfolio-thumbnail">
                                <img width="920" height="920" src="https://www.pampacasastaging.com/wp-content/uploads/2019/08/920x920-livingroom2-080A3756.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="">                                </div> 
                            <div class="portfolio-caption-content">
                                <a class="portfolio-content-link" href="https://www.pampacasastaging.com/portfolio/philo/" target="_self"></a>
                                <div class="portfolio-content-inner">
                                    <div class="portfolio-content-details">
                                        <h5 class="portfolio-title"><a href="https://www.pampacasastaging.com/portfolio/philo/" target="_self">philo</a></h5>                                        </div>
                                                                        </div>
                            </div>
                        </div>
                                                </div>                        <div class="grid-sizer col-xs-12 col-sm-12 col-md-12"></div>
                                </div>
                        </div>
    </div><!-- #main -->
</div><!-- #primary -->

威尔希尔大道。”

Answer 1

您的内联内容可能比手机屏幕宽，可能是

img width =“ 920” height =“ 920” .....

如果要解决此问题，使图片（或任何元素）对每台设备都具有响应性，则必须以每台设备的尺寸百分比或使用vw和vh单位来表达它们

如何解决响应式CSS代码错误？

1 个答案: