设置tablate设计响应 [英] Set tablate design responsive

问题描述

嘿，我正在开发聊天应用程序。

我有标题，其中显示照片，用户名，状态。

i检查所有设备它是完美的响应期待仅在ipad和ipad pro。

所以我做了什么改变，所以它在所有设备上都能正常工作。
ipad中的
我的名字会因为动态而 char比工作正常而且

如果它超过6而不是它低于照片。



名称显示在

hey i am working on chat app.
where i have header where photo,username,status is display.
i check in all device it's perfect responsive expect only in ipad and ipad pro.
so what change i do so it's work in all device.
in ipad my name goes to down because it's dynamic and if its 6 char than work proper and
if it more than 6 than it's goes to down below the photo.

name is displaying in

LogInUsernameLbl

标签



我尝试过：

lable

What I have tried:

<div style="height: 50px; padding: 1%">
                            <div class="col-sm-8 col-xs-10 heading-avatar">
                                <div class="heading-avatar-icon">
                                    <asp:Image ID="imgUser" runat="server" onerror="this.onerror = null; this.src = '../UploadPhotos/default_user.png';"/>
                                    <p style="display: inline-block; color: white; font-size: 20px; font-weight: 400;" class="statusname">
                                         <asp:Label runat="server" ID="LogInUsernameLbl"></asp:Label>
                                    </p>
                                </div>
                            </div>
                            <div class="col-sm-2 col-xs-2 pull-right">
                                <div class=" heading-dot  pull-right">
                                    <div class="dropdown">
                                        <button class="btn btn-link dropdown-toggle" type="button" data-toggle="dropdown"></button>
                                        <ul class="dropdown-menu dropdown-menu-right">
                                            <li><a href="#" class="statuschange" data-key='{"param1":"online"}'>Online</a></li>
                                            <li><a href="#" class="statuschange" data-key='{"param1":"offline"}'>Invisible</a></li>
                                            <li><a href="#" class="statuschange" data-key='{"param1":"busy"}'>Busy</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

推荐答案

您好Jaydeep尝试此代码格式的CSS文件



希望这会对你有所帮助。



iPad in portrait&风景



@media only screen

和（min-device-width：768px）

和（max - 设备宽度：1024px）{/ * STYLES GO HERE * /}



iPad in landscape



@media only screen

和（min-device-width：768px）

和（max-device-width：1024px）

和（方向：风景）{/ * STYLES GO HERE * /}



iPad in portrait



@仅媒体屏幕

和（最小设备宽度：768px）

和（最大设备宽度：1024px）

和（方向：portrait）{/ * STYLES GO HERE * /}

Hi Jaydeep try this code form CSS file

Hope this helps you.

iPad in portrait & landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) { /* STYLES GO HERE */}

iPad in landscape

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) { /* STYLES GO HERE */}

iPad in portrait

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { /* STYLES GO HERE */ }

这篇关于设置tablate设计响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！