移动版的Html代码现在需要转换为桌面版，以便它同时用于移动版和桌面版

现在的代码是移动友好的，因为我现在有它的设置方式，我只希望它是桌面友好的，而不会弄乱移动版本

这是我到目前为止所做的，css在底部

@model IEnumerable<GSWebAPI.GS_Survey_Questions>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/Layout_Surveys.cshtml";
    int counter = 0;
}

@foreach (var i in Model)
{

    if (i.Question_Type == "DROPDOWN")
    {

        <div class="container text-center">


                <div class="row idrow" data-questions="@counter">
                    @{counter++;
                    }

                        <div id="question1" class="form-group">
                            <label class="lab text-center" for="form-group-select">
                                @i.Question_Order @Html.Raw(@i.Question)
                            </label>
                            @{ var works = "question" + counter.ToString();}
                            <select name="@works" class="form-control selects" id="form-group-select">
                                @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
                                    {
                                        var t = x - 1;
                                        if (i.qOps != null)
                                        {
                                        <option> @i.qOps.options[t]</option>
                                        }
                                        else
                                        {
                                        <option> @x</option>

                                        }
                                    }
                            </select>
                        </div>







                </div>

        </div>

                        }

                        if (i.Question_Type == "RADIO")
                        {




        <div class="container">
            <div class="row idrow" data-questions="@counter">
                @{counter++;
                }
                <div class="form-group">
                    <label class="lab" for="questions">
                       @i.Question_Order @i.Question
                    </label>
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="question1" class="radio-inline">
                                @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
                                {
                                    var t = x - 1;
                                    if (i.qOps != null)
                                    {
                                        <label class="radio-inline"><input type="radio" name="question"> @i.qOps.options[t]</label>
                                    }
                                    else
                                    {

                                          <label class="radio-inline"><input type="radio" min="0" max="@x" name="question"></label>

                                    }
                                }
                            </div>

                        </div>

                    </div>
                </div>


            </div>
        </div>

    }
    if (i.Question_Type == "CHECKBOX")
    {
        for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++)
        {
            @*<div class="container">
                <div class="row">

                    <label>@y</label>   <input type="checkbox" name="question">

                </div>
            </div>*@
        }
    }

}
<div class="azibsButtons">
    <button type="button" id="previous"  class="btn btn-primary pull-left">Prev</button>

    <button type="button" id="next"  class="btn btn-primary pull-right">Next</button>

    <button type="button" id="submit" onclick="Sendingitoff();" class="btn btn-primary pull-right">Submit</button>
</div>



<script>
    function formToJSON() {
        var form = {};
        $('.selects').each(function () {
            var self = $(this);
            var name = self.attr('name');
            if (form[name]) {
                form[name] = form[name] + ',' + self.val();
            }
            else {
                form[name] = self.val();
            }
        });

        return form;
    }



    function Sendingitoff(){
        debugger;
        var form = formToJSON();
        var look = JSON.stringify(form);

        $.ajax({
            url: '@Url.Action("Answers", "GSSurvey")/' + '?username=@Request.QueryString["username"]'  + '&receiverid=@Request.QueryString["receiverid"]' + '&id=@Request.QueryString["id"]',

            type: 'POST',
            contentType: "application/json",
            dataType: 'json',
            data: look,
            success: function(data, textStatus, jqXHR) {



            },
            error: function(jqXHR, textStatus, errorThrown) {

            }
        });

    }
    $(document).ready(function () {
        ShowTheelement(0);
        $("#previous").addClass('hidden');
        $("#submit").addClass('hidden');

        var dataVal = 0;

        $("#next").click(function () {
            dataVal++;
            $("#previous").removeClass('hidden');
            dataVal == $(".idrow[data-questions]").length-1 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
            ShowTheelement(dataVal);
            if (dataVal == $(".idrow[data-questions]").length - 1)
                $("#submit").removeClass('hidden');
        });

        $("#previous").click(function () {
            dataVal--;
            $("#next").removeClass('hidden');
            dataVal == 0 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
            ShowTheelement(dataVal);
            if (dataVal == $(".idrow[data-questions]").length - 2)
                $("#submit").addClass('hidden');

        });
    });

    function ShowTheelement(dataVal) {
        $(".idrow").addClass('hidden');
        $(".idrow[data-questions='" + dataVal + "']").removeClass('hidden');
    }
</script>

.navbar-header {
    position: absolute;
    left: 19%;
    top: 10%

}
/* Portrait */
@media only screen and (min-device-width: 1025px) and (max-device-width: 1200px) {

    .form-control {
        margin-right: 25%;
    }
}
@media only screen and (min-device-width: 414px) and (max-device-width: 480px) {

    .form-control {
        margin-left: 13%;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 412px) {

    .form-control {
        margin-left: 11%;
    }
}

@media only screen and (min-device-width: 320px) and (max-device-width: 370px) {

    .form-control {
        margin-left: 2%;
    }
}


.azibsButtons {

    padding-top: 100px;
    padding-left: 10px;
    padding-right: 10px;
}

.form-control {
    margin-top: 15px;
     position: fixed;
     top:250px;
}
.idrow label{
      height:100px;
     max-height: 100px;
     min-height:100px;

}
.form-group{
    max-height:188px;
    min-height:188px;
}
.lab {
    font-size: 13px;

}

.form-control-select {

}

.form-group {
    margin-top: 20px;  

}
.body-content {
    margin-top: 110px;

}

a {
    text-decoration: none;
    display: inline-block;
    margin-bottom: 80px;
    padding: 8px 90px;
    padding-left: 10px;
}

    a:hover {
        background-color: #ddd;
        color: black;
    }


.body-content .row {
    font-size: 18px;
}

.navbar {
    height: 150px;
}

#navbar-wrapper .imgLogo {
    width: 200px;
}

#surveryForm .form-group {
    padding-left: 20px;
    margin-top: 20px;
}

#surveryForm .radio-inline2 {
    font-size: 20px;
    padding-left: 20px;
}



#surveryForm .radio-inline3 {
    font-size: 15px;
    padding-left: 15px;
    margin-right: 10px;
}

#surveryForm .radio-inline {
    font-size: 15px;
}

#surveryForm .form-group .checkbox-inline {
    float: left;
    margin-left: 30px;
}

@model IEnumerable
@{
ViewBag.Title=“Index”；
Layout=“~/Views/Shared/Layout\u Surveys.cshtml”；
int计数器=0；
}
@foreach（模型中的var i）
{
如果（i.问题类型==“下拉列表”）
{
@{计数器++；
}
@i、 问题\顺序@Html.Raw（@i.Question）
@{var works=“question”+counter.ToString（）；}
@对于（intx=1；x我能够自己解决这个问题，下面是我编写的代码

//@仅媒体屏幕指向您可以想象此网页将显示的大小，您也可以根据设备的大小编写CSS测量值//

//桌面--//

//iphone6plus--//

您使用的是什么框架/库？我使用的是MVC.net framework@liroPPlease Google responsive web design。请不要在桌面上复制和粘贴您的移动内容。此外，看起来您使用的是Twitter引导，它非常适合创建响应性网站。@hungerstar是对的。检查并了解网格和响应性网页设计调整窗口大小以查看efect mobile/desktop和viceverse。@hungerstar它是如何工作的？只是向您提供如何操作的信息？
@media only screen and (min-device-width: 760px) and (max-device-width: 3000px)  {
    .navbar-header{
       position: absolute;
         left: 45%;
    }
    hr {
    display: block;
    background-color:blue;
    height: 1px;
    border: 0;
    border-top: 2px solid #ccc;
    margin: 1em 0;
    padding: 0;
    margin-top: 8%;
}
    .azibsButtons {

    padding-top: 100px;
    padding-left: 10px;
    padding-right: 5px;
}
    .form-control {
        margin-left: 40%;
    }
}

@media only screen and (min-device-width: 414px) and (max-device-width: 480px) {

    .form-control {
        margin-left: 13%;
    }
    hr {
    display: block;
    background-color:blue;
    height: 1px;
    border: 0;
    border-top: 2px solid #ccc;
    margin: 1em 0;
    padding: 0;
    margin-top: 35%;
}
}

//iphone 6 --//

@media only screen and (min-device-width: 375px) and (max-device-width: 412px) {

    .form-control {
        margin-left: 11%;
    }
    hr {
    display: block;
    background-color:blue;
    height: 1px;
    border: 0;
    border-top: 2px solid #ccc;
    margin: 1em 0;
    padding: 0;
    margin-top: 39%;
}
}
//iphone 5 --//

@media only screen and (min-device-width: 320px) and (max-device-width: 370px) {

    .form-control {
        margin-left: 2%;
    }
    hr {
    display: block;
    background-color:blue;
    height: 1px;
    border: 0;
    border-top: 2px solid #ccc;
    margin: 1em 0;
    padding: 0;
    margin-top: 46%;
}
}