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?
Viewport units & responsible design
Moderator: mikey
Viewport units & responsible design
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.
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.
Re: Viewport units & responsible design
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
Re: Viewport units & responsible design
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
or 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.
Code: Select all
body{font-size: 2vw;}
Code: Select all
body{font-size: 2vh;}
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.
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.
Re: Viewport units & responsible design
Here is a more interesting article: Fixing Cross-Browser Issues With CSS3 Viewport Units in IE9+ and Safari for iOS
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Viewport units & responsible design
Yes, I have read this too and tried it locally, but it didn't work. Maybe some misunderstanding and wrong adjusting?lck wrote:Here is a more interesting article: Fixing Cross-Browser Issues With CSS3 Viewport Units in IE9+ and Safari for iOS
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.
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.
Re: Viewport units & responsible design
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).
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.
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.