Viewport units & responsible design

Please post the URLs to pages, where you've made a CMSimple template available for download

Moderator: mikey

Post Reply
Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Viewport units & responsible design

Post by Tata » Tue Jul 19, 2016 7:15 pm

I have reached an interesting (but unpleasant) point.
It seems to me that vw/vh units are the units of future responsive design. You may use them for everything (especially using them for font-size opens suprising effects) and webpages behave really very well on various devices. But only except of Safary. I have searched the internet today, but haven't found nothing suitable.
Has anybody any experience with this issue?
One more question:
I work on MAC and need to run Windows in the background to test webpages in IE. Chrome seems to me to be just a clone of IE, but it runs also on MAC. Do you have any experience as to what differences there are in Chrome vs. IE?
Last edited by Tata on Tue Jul 19, 2016 10:36 pm, edited 1 time in total.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

cmb
Posts: 14225
Joined: Tue Jun 21, 2011 11:04 am
Location: Bingen, RLP, DE
Contact:

Re: Viewport units & responsible design

Post by cmb » Tue Jul 19, 2016 9:49 pm

I don't have any personal experience regarding this CSS length units, but Can I Use might be informative.
Christoph M. Becker – Plugins for CMSimple_XH

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Viewport units & responsible design

Post by Tata » Tue Jul 19, 2016 10:20 pm

Well, there is one very nice feature. There is a lot info on the internet. If you set a font-size for e.g. body

Code: Select all

body{font-size: 2vw;}
or

Code: Select all

body{font-size: 2vh;}
it means, the font-size is 2% width or height of any actual viewport.
On a monitor with 1920px 2% is about 40px. The nice behavior is, that this way it is always related to the width of the device. Disadvantage is that Safari doesn't support it. It works nice with FF, Opera and IE.
I actually use these units in my newest templates as well.
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

lck
Posts: 2963
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: Viewport units & responsible design

Post by lck » Wed Jul 20, 2016 9:38 am

„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“   👉 Ludwig's XH-Templates for MultiPage & OnePage

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Viewport units & responsible design

Post by Tata » Wed Jul 20, 2016 1:14 pm

Yes, I have read this too and tried it locally, but it didn't work. Maybe some misunderstanding and wrong adjusting?
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Tata
Posts: 3586
Joined: Tue May 20, 2008 5:34 am
Location: Slovakia
Contact:

Re: Viewport units & responsible design

Post by Tata » Wed Jul 20, 2016 7:39 pm

Howevwr funny does it seem, today all browsers both on MAC (FF v47.0, Safari v9.1.1, Opera v38.0.2 and Chrome v51.0.2) and Windows (FF v47.0.1, Safari v5.1.7, Opera v38.0, Blisk v0.6 and Chrome v52.0.2), everything seems to work as coded. Only in Safari on Windows the calculation doesn't work properly.
Even the heights of block are accepted. I have found, however, that the global "fluidness" of the website becomes problematik on very small screens and thus the @mediaquerry breakpoints are necessary anyway (for setting the body-font new values, so that the text remains readable).
CMSimple.sk
It's no shame to ask for an answer if all efforts failed.
But it's awful to ask without any effort to find the answer yourself.

Post Reply