[JS] Responsive Design Guidelines

[thedjdoorn]

Hey,

Ik ben bezig met een website waarbij ik gebruik maak van Semantic UI. SUI is van zichzelf wel lekker responsive, alleen de header (top fixed menu) schaalt imo niet zo goed mee. Hierom wil ik graag een js functie in elkaar toolen die aan de hand van document.width de goede header toewijst. Als ik kijk naar hoe dit op Tweakers is geregeld heb ik zo mijn bedenkingen of er niet nog een regel aan vast zit, gezien er anders op mijn 1080p telefoonscherm ook de desktopversie zou komen.

Is het dus beter om een andere unit op te vragen? En welke sizes zouden jullie dan aanraden?

[RobIII]

Waarom uberhaupt JS en niet middels CSS (wat toch al, mwoah, mínstens 5 jaar de norm is)?

[ Voor 5% gewijzigd door RobIII op 04-08-2016 18:31 ]

[Mebus]

Bootstrap?

[thedjdoorn]

RobIII schreef op donderdag 04 augustus 2016 @ 18:31:
Waarom uberhaupt JS en niet middels CSS (wat toch al, mwoah, mínstens 5 jaar de norm is)?

2 redelijk slechte redenen:

1) Gebrek aan skill
2) De sidebar component bestaat al in SUI (die wilde ik namelijk gaan gebruiken ipv top fixed menu voor de mobiele en tablet versie), en het zou een beetje veel duplicate code opleveren als ik ergens nog een CSS regel ging schrijven die automatisch het desbetreffende component (inclusief alle prefixes) bij de grootte uitzoekt, al ben ik het er mee eens dat het misschien een lousy hack is...

[Ventieldopje]

thedjdoorn schreef op zondag 07 augustus 2016 @ 05:03:
[...]


2 redelijk slechte redenen:

1) Gebrek aan skill
2) De sidebar component bestaat al in SUI (die wilde ik namelijk gaan gebruiken ipv top fixed menu voor de mobiele en tablet versie), en het zou een beetje veel duplicate code opleveren als ik ergens nog een CSS regel ging schrijven die automatisch het desbetreffende component (inclusief alle prefixes) bij de grootte uitzoekt, al ben ik het er mee eens dat het misschien een lousy hack is...

Met SUI kun je gebruik maken van een 'site' thema (less/scss) en daarin kun je overrides doen en variabelen aanpassen. Ook specifiek voor de sidebar dus. Dat maakt SUI ook een framework en niet alleen een thema/library.

Skills kun je leren

[Compizfox]

Ik ben het eens met RobIII: dit soort dingen hoor je met CSS te doen, niet met JS.

Ik ken Semantic UI niet, maar ik neem aan dat het een HTML/CSS framework vergelijkbaar met Bootstrap?

[Ramon]

thedjdoorn schreef op donderdag 04 augustus 2016 @ 18:18:
Hey,

Ik ben bezig met een website waarbij ik gebruik maak van Semantic UI. SUI is van zichzelf wel lekker responsive, alleen de header (top fixed menu) schaalt imo niet zo goed mee. Hierom wil ik graag een js functie in elkaar toolen die aan de hand van document.width de goede header toewijst. Als ik kijk naar hoe dit op Tweakers is geregeld heb ik zo mijn bedenkingen of er niet nog een regel aan vast zit, gezien er anders op mijn 1080p telefoonscherm ook de desktopversie zou komen.

Is het dus beter om een andere unit op te vragen? En welke sizes zouden jullie dan aanraden?

Telefoons rapporteren "virtuele" pixels aan de browser. Browse maar eens op je telefoon naar http://www.whatismyscreenresolution.com/. Je zal dan wellicht is van 360*720 ofzo zien. Deze kan je gebruiken in je mediaqueries om je aanpassingen aan de header te doen.

Voorbeeldje: (nog wel even de css zelf aanpassen )

Cascading Stylesheet:

@media all and (max-width: 800px) {
  #sidebar ul li a {
    padding-left: 21px;
    background: url(../images/email.png) left center no-repeat;
  }
}

[Caelorum]

In css rapporteren ze dat inderdaad, maar in javascript niet (altijd). Bovenstaande site rapporteert dan ook full hd op mijn telefoon.

[The Milkman]

Caelorum schreef op zondag 07 augustus 2016 @ 18:13:
In css rapporteren ze dat inderdaad, maar in javascript niet (altijd). Bovenstaande site rapporteert dan ook full hd op mijn telefoon.

Check dan http://mqtest.io/ eens.

En heb je het volgende in je head staan?

<meta name="viewport" content="width=device-width, initial-scale=1">