Comments (16)
I wouldn't remove px in favor of em, but keep them both. Like .gt300px and .gt300em and possibly .gt300pct (percent).
from responsive-elements.
@davebakker would be even better, of course! ;-)
from responsive-elements.
The width could be calculated like this:
function getElementWidthInEm(jqueryElement) {
return jqueryElement.width() / parseFloat( jqueryElement.css("font-size") );
}
from responsive-elements.
+1 for addition of ems.
from responsive-elements.
EMS, like percentages are relative. What would these EMS be relative to?
from responsive-elements.
@kumailht Relative to the targeted element? (In case of em's)
In case of a percentage, relative to the first parent with an absolute position.
from responsive-elements.
The only reason to use responsive elements is so your elements can adapt to its parent. I don't see how EMs or percentages could even work. Maybe I'm missing something here but I am having a hard time visualizing a real world use case.
from responsive-elements.
The only reason to use responsive elements is so your elements can adapt to its parent. I don't see how EMs or percentages could even work. Maybe I'm missing something here but I am having a hard time visualizing a real world use case.
When the parent element is assigned a percentage width (as opposed to a px or em width), we may not know what it's actual width will be. If we already use ems for our standard media queries, being able to use ems for the "element media query" would be a more natural fit. Plus the parent's ems value takes into account the user's browser's text-zoom setting.
I haven't used "element media queries" before, so I haven't followed this through and tested, but as far as I can think using ems would be practical in the same way that using them for standard media queries would be.
from responsive-elements.
+1 with @DavidOliver
from responsive-elements.
Start using rem
, it behaves the same as em except it is relative to the document root instead of the parent.
So define a base font size on the body as 16px or whatever, then all rem
units on the size are relative to that 16px. Change the font size for smaller screens and everything scales perfectly.
from responsive-elements.
@josephspens rem
put more constraints than em
.
To quote @simurai 's great Sizing (Web) components post:
[with
rem
] you can scale everything up/down by just changing the root font-size. But there is the problem: It scales everything. If you want finer control, you’re out of luck. By using [em
] font-size on a per component level it allows you to size them all individually.
Considering we're talking here about responsive elements, using units that let us change elements individualy seems the way to go.
from responsive-elements.
@nhoizey I'm not sure I follow... by changing the root font-size everything on the site will scale regardless of using em
vs rem
. The difference is your components won't be scaling the way you want them to.
Let's say you want to scale the entire site x2, with rem
all you need to do is double the root font-size and everything scales as you would expect. With em
, your components are most likely going to scale greater than x2, because their parents have a font-size of 1.2em, which is nested in a wrapper of 1.4em, and so on. Just using that example, your component is already 136% larger than you intended.
What finer control do you want? If you want to only scale the component, change the component's root font-size from 1rem to 1.2rem, an so on.
from responsive-elements.
I think we misunderstood each other, what I was advocating for was setting a component's root font-size using rem
, but it's sub components must be em
so the entire component scales as one. I just don't like using em
for the component's root font-size because you lose control once you add it to the page, depending on where you put it.
For example:
.Component {
font-size: 1rem;
.Component-title {
font-size: 1.6em;
}
.Component-text {
font-size: 1.2em;
}
}
from responsive-elements.
@josephspens OK, I know understand… ;-) I thought you wanted to put rem
units everywhere.
You just have to chose very carefully the elements on which you use rem
. Then, it is true you can "move" your components anywhere in the document and they will keep their sizes. If that's what you want — seems the most frequent use — that's perfect.
However, when using rem
you have to also use px
fallbacks, whereas em
works everywhere… ;-)
from responsive-elements.
@nhoizey Ah, I see what you mean! rem is unavailable to legacy IE... so can we agree rem
as the root font size of a component is the way to go once we stop supporting IE8?
from responsive-elements.
@josephspens I agree for most projects, yes. Some may still require components that scale depending on their parents, but I think it's not the most frequent use.
from responsive-elements.
Related Issues (10)
- Add an element observer to watch for width changes HOT 1
- [enhancement] Add missing bower.json.
- Not really stable when container has percentage width
- Please update the bower package with the new addElement method. HOT 7
- Mention element-queries spec
- Demo bug HOT 2
- Removing the jQuery dependency HOT 4
- Add gte and lte HOT 1
- Add ability to compare against any size (not increments of 50) HOT 5
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from responsive-elements.