ASP.NET Core supporting various form factors?

whorsfall
whorsfall used Ask the Experts™
on
Hi,

Once again coming from a beginner perspective so I can start to do some reading for curiosity.

I know that ASP.NET core web apps have to handle things to handle different screen sizes. For example a client might
browse from a phone or a PC or a tablet.

How is this detected and handled basically.

What term should I be looking for in the documentation and tutorials to see how this is approached.?

Also really to ask how difficult this is to code and handle in general.

Thanks,

Ward
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
The term you're looking for is Responsive Web Design and it's generally dictated by the styling of your website - the CSS, so it's not specific to the development language of choice, such as ASP.Net / PHP / HTML.

The default ASP.Net project in Visual Studio includes Bootstrap which is a responsive, mobile-first CSS Framework, so if you want your site to be responsive (which you should!), then start by taking a look at the docs for Bootstrap - http://getbootstrap.com/

Author

Commented:
Chris,

Thanks for that. Great response.

So I can therefore assume that if working on a non-mobile device like a  PC or MAC  it is designed to handle that as well?

hanks,

Ward.
Most Valuable Expert 2018
Distinguished Expert 2018
Commented:
Yeah. Basically, it's common practice to design your site to work on Mobiles and then scale gracefully up to the larger devices - this is what's know as a mobile first approach. With the bootstrap framework, you add classes to your elements which dictates how they're laid out on the various devices.

For example, you could have a layout like so:

<div class="container">
  <div class="row">
    <div class="col-md">
      One of three columns
    </div>
    <div class="col-md">
      One of three columns
    </div>
    <div class="col-md">
      One of three columns
    </div>
  </div>
</div>

Open in new window

This would give your layout 3 columns side by side on devices larger than 'medium' (768px wide) such as tablets / desktops, but on smaller, mobile devices they would stack one on top of the other.
Dirk StraussSenior Full Stack Developer
Distinguished Expert 2017
Commented:
Great answer @Chris.
Ward, you may want to check out this Bootstrap Tutorial too.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial