ASP.NET: как сделать веб-форму адаптивной для мобильных устройств?

У меня есть проект ASP.NET. Я хочу, чтобы он автоматически менял свой вид, когда устройство определяется как мобильное или настольное. Какие способы доступны? Пожалуйста, предложите несколько примеров проектов. понять их. Может ли кто-нибудь предложить пошаговый метод для этого?


mobile asp.net responsiveness
person Dee    schedule 23.12.2016    source источник
comment
Вы можете использовать медиа-запросы css3 или такие фреймворки, как Bootstrap и Foundation.   -  person Saad Suri    schedule 23.12.2016
comment
Обнюхивание браузера совершенно ненадежно. Используйте мультимедийные запросы RWD или, как предложил Саад, Bootstrap.   -  person IrishChieftain    schedule 23.12.2016
comment
Я совершенно новичок в ASP.NET. Даже я впервые слышу слово медиа-запрос. Так может ли кто-нибудь объяснить мне четко шаг за шагом? с приведенным примером? пожалуйста.   -  person Dee    schedule 23.12.2016
comment
Изучите адаптивный веб-дизайн. Это, вероятно, будет закрыто, потому что у вас нет конкретного вопроса. Кроме того, на самом деле это не связано с ASP.NET.   -  person IrishChieftain    schedule 23.12.2016

Ответы (1)


arrow_upward
0
arrow_downward

Для того, чтобы сделать вашу веб-страницу отзывчивой в соответствии с устройством

--> во-первых, в вашем проекте должен быть загрузчик.

--> у вас будет container в файле bootstap.css (assets-->css-->bootstap.css).

--> container будут иметь различные типы экранов, объявленные по умолчанию.

ПРИМЕР:

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

--> вы должны использовать этот контейнер в своем файле cs. В asp.net это файл расширения .aspx.

ПРИМЕР:

<div class="below-slideshow" style="padding-bottom: 0px">
            <div class="container">  <!-- NOTICE HERE:inside div declare class as container/container-fluid-->
               <div class="row">
                   <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div>

                            <h1 class="head-line">Dashboard</h1>
                     </div>
                    </div>
                   </div>
             </div>
        </div>

--> Чтобы узнать больше о контейнерах и их жидкости, http://www.w3schools.com/bootstrap/bootstrap_get_started.asp/%22check%20this%22

УДАЧНОГО КОДИРОВАНИЯ :-)

person Deepa MG    schedule 25.12.2016