I want my page to scale awesome to fit all possible screens on all devices, so I've used an idea to change em size of the root element. All child elements have sizes in em;
Resizing of the page and zooming should also be supported well.
I'm currently having 200 lines of such a funny css code:
.........
#media (max-width: 400px) {
#vb { font-size: .8px}
}
#media (max-width: 350px) {
#vb { font-size: .7px}
}
#media (max-width: 320px) {
#vb { font-size: .64px}
}
.........
I would like to ask for a pretty library that would generate this code automatically.
I am sure that this huge css code should be generated on frontend, because those 200 - 1000 lines consume kilobytes.
PS: What about correctness of my approach?
The solutions could be:
what if I calculete the page size by JavaScript and put just two lines of code like:
var fontSize = calculateFS();
$('#vb').style({sizeSize: fontSize});
This code works good if we are not going to resize the window or zoom in-out. But if I'm going to catch events onzoom or onresize, there are serious lags in interface.
any other ideas form the community?
Thank you for attention
Why not consider responsive typography using rems?
This article explains this in much more detail. A short excerpt:
#media (max-width: 640px) { body {font-size:1.2rem;} }
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width: 960px) { body {font-size:1.2rem;} }
#media (min-width: 1100px){ body {font-size:1.5rem;} }
This would seem like a far better option than using ems or pixels, because rems are relative to the body element, not the parent element.
I might have misinterpreted this, but it doesn't really seem like you need to use so many media queries, or even any JS at all.
If you just want to keep media queries maintainable, perhaps consider using Compass and Sass? http://css-tricks.com/media-queries-sass-3-2-and-codekit/
Related
We know that there are different ways we can change the width(or any properties) of the element using the #media queries
We can use Aspect pixel ratio, device width and height.
https://developer.mozilla.org/en-US/docs/Web/CSS/#media
Requirement : We have to maintain the same physical width of the element accross platorms, In Mobile,desktop, or any of the DPI element should looks same.
I tried using em, vw,%, no luck.
If i used all these the physical look of the element will very from one devioce to another.
Some of the device it looks small, some devices it's big.
Can anyone please suggest me how we can achieve this.
Maybe you can try with vmin and vmax, those are based in the vh and vw, but you can manage to maintain a very good aspect ratio with those measures. I often use vmin for the more specific measures, as font sizes, image sizes and that. I'd recomend you to use vmax to achive other kind of measures, as containers and so. I also use CSS variables to take an adventage of this things and scale down several things in the media querys, also, with vmin and vmax, I can skip several medias.
As an example, here you have a little font size snipet
:root
{
--text-size: 2.1vmin;
}
.px
{
font-size: 16px;
}
.vmin
{
font-size: var(--text-size);
}
#media only screen and (max-width: 700px)
{
:root
{
--text-size: 3.5vmin;
}
.px
{
font-size: 12px;
}
}
<p class='px'>Here is the example text with px</p>
<p class='vmin'>Here is the example text with vmin</p>
For Desktop with browsers chrome >= 28, safari >=9 IE>=12 opera >=14
use below media query.
#supports (-webkit-appearance:none)
You can use below media query that fits for any mobile device for
portrait mode.
#media (max-width:720px) and (orientation:portrait)
Also, at the same time if you want mobile responsive in landscape mode
that too you can fix the issue using below media query.
#media only screen and (orientation:landscape)
and (min-device-width: 319px)
and (max-device-width: 1024px)
In most of the cases there is responsiveness issues in internet explorer,
you can use below media query.
#media screen and (min-width:0\0)
I myself have tested these media queries mentioned above, feel free to let me know incase any queries.
Hope my solution helps you out!!!!!!!!!!!
I hope it was not a misunderstanding, but you want the element to have an element with an unchanged size in real life measurement no matter the device used? Like an online ruler?
If so, have you tried to use centimeters (cm) instead of pixels or percents? It seems that browsers support this unit, but I don't have a measurement tool to test its real size. The CSS measurement units are well explained on W3.
<div id="cm"></div>
#cm {
position: relative;
margin: 0 auto;
height: 8cm;
border: 2px dashed red;
width: 10cm;
}
Here is a code that might help: https://codepen.io/ialexandru/pen/oNgMvXR
So my graphic artist came up with a layout that I am having trouble coming up with a clean solution to. Basically they want a full-width responsive image, with text over it. But the text has to be left-aligned and fit within a container div, instead of being full width too. I also need to take care of mobile/tablets/etc. so I have to make sure the font size works on all devices too (hence the font resizing in the JQuery/JS).
So I was just wondering if I am doing this the most efficient way possible. I feel like bootstrap should have something to fix this issue and that I just missed it, but this is the best solution I could come up with (WARNING: code is still a work in progress, don't hate me for poor JS/JQuery =D)
So here is my BootPly with the solution I came up with:
http://www.bootply.com/bdS9H3otpi
I am hoping someone will be like, oh boy that was overkill just do X, but for the life of me I cannot think of what X will be.
P.S. My question was basically answered by myself, I am just hoping there is a cleaner solution. If no one can come up with one I will just clean up the JQuery/Javascript code and use it as is
first of all no need for JS .
1- main part put the image as back ground and the text as title ( h1 )
2- for responsive use only CSS
for example
#newsHeaderTitle{
color:white;
height:100%;
margin:0;
font-size:350%;
line-height:350%;
}
/* image BG image */
#media only screen and (max-width : 1200px) {
#newsHeaderTitle{font-size:350%;line-height:300%;}
}
#media only screen and (max-width : 992px) {
#newsHeaderTitle{font-size:300%;line-height:350%;}
}
#media only screen and (max-width : 768px) {
#newsHeaderTitle{font-size:200%;line-height:350%;}
/* image BG tablet image */
}
#media only screen and (max-width : 480px) {
#newsHeaderTitle{font-size:100%;line-height:100%;}
/* image BG mobile image */
}
try to use all height and sizes in EM its better than %
dont add your CSS in html .
We're using a theme that has responsive navigation... but it's pretty bad on the third-level. I'd like to remove that level completely on devices less that 768px wide.
Does anyone have an idea of how to do this? All of the navigation elements seem to be converting to <option>... is there a way to tell it to only do this to top- and second-level navigation?
http://www.torontofamilytherapist.com/
Thank ya!
#media screen and (max-width: 767px) {
.sub-menu .sub-menu {
display: none
}
}
Should do it. You could also add that selector and declaration to a similar media query if you have one already.
I need to check whether user's resolution is <1300px or >1300px and if it is <1300px to load layout with horizontal divs and if it is >1300px to load layout with vertical divs.
Template is the same I only need to put one div in horizontal or vertical position depening on resolution.
Since I cannot do it with PHP, I have to do it with javascript, so I would have to use "load" function to load part of my template where is vertical or horizontal div? I'm using Yii framework
You can use CSS media query for that:
// For screen < 1300px
#media screen and (max-width: 1300px) {
.foo {
...
}
}
// For screen > 1300px
#media screen and (min-width: 1300px) {
.foo {
...
}
}
Typically this sort of thing is in the CSS domain (via media queries), not the JavaScript domain.
You can use the screen object, though, to get the dimensions of the user's screen:
var width = screen.width; // Or screen.availWidth;
In JavaScript you can detect it by:
window.screen.availHeight
window.screen.availWidth
while in CSS you need to use media queries:
#media screen and (min-width: 1200px)
How to write a css media query to get the sidebar snap to lie between header and page content?I want this change to happen when the page width drops below 500 pixels.
I am doing this for chrome browser.
Please have a look at the body of my HTML File.
The Contents of the body is filled using Javascript later. Buttons are created and appened to the "buttonAttachPoint". The contents is got in a form of HTML-Elements String and appeneded to the pageAttachPoint.
I have currently used the following css code to set the number of columns.
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:3px;
The following media query does not seem to have any effect:
#media screen and (min-width: 500px) {
body
{ background-color: #0f0;
-webkit-column-count:1; }
}
Any help would be appreciated.
I think you mixed up max and min.
#media screen and (max-width: 500px){
body {
background-color: #0f0;
-webkit-column-count:1; }
}
}
Example: http://jsfiddle.net/HnPSF/1/