How to make responsive design using Aurelia JS

Framework Knowledge
1

I have use CSS for responsive design but now my concern that how it is possible with aurelia js.
I have no code for showing so please help me . Is this possible by using Aurelia js

2

Responsive design is pure css thing, there is nothing you need to do specially for Aurelia to support it. For instance, if you use bootstrap, just write down the html literally following its example, in Aurelia html template files.
Run your app, those bootstrap row and col-xx classes will behave responsively when you resize your browser window width.

2 Likes
4

Actually I have use semantic UI and I want to use mobile detector by using Aurelia . How to detect mobile. Is it possible in by using Aurelia ?

5

Since no other people come forward with semantic UI exp, may I ask what’s “semantic UI mobile detector”? I could not find any relevant information.

If you were talking about css media rule like this:

@media only screen and (max-width: 991px) and (min-width: 768px)

Well, you don’t need to do anything in JavaScript. Aurelia doesn’t care what’s in your css. Just use your css classes in your html templates.

6

Semantic UI is similar to other CSS frameworks in this respect. There are specific CSS classes you use for different screen sizes. I also like to use this one: http://include-media.com

There is no such thing as a “mobile detector” in javascript other than workarounds like this one which is not how you want to do responsive design.

As @huochunpeng said, responsiveness is a CSS issue. You’re basically looking in the wrong place if you try to get Aurelia (or any other js framework) to do it :slight_smile:

7

Thanks @fkleuver and @huochunpeng