What is the best font size (web) for iphones, nexus and the most commons smartphones? 16px like desktop computers?
It depends on screen sizes.
Below are the sevral font sizes for diffrent screen sizes.
(min-width: 858px)
font-size: 12px
(min-width: 780px)
font-size: 11px;
(min-width: 702px)
font-size: 10px;
(min-width: 724px)
font-size: 9px;
(max-width: 623px)
font-size: 8px;
Related
I have variables for different typography sizes and want to change the values on mobile and tablet devices, but my code below isn't working.
$h1-size: 2.5rem;
$h2-size: 2rem;
$h3-size: 1.7rem;
$h4-size: 1.4rem;
$h5-size: 1.2rem;
$h6-size: 1rem;
#media screen and (max-width: 768px) {
$h1-size: 2rem;
$h2-size: 1.7rem;
$h3-size: 1.4rem;
$h4-size: 1.2rem;
$h5-size: 1rem;
}
I woud like that if my viewport width is smaller than 330px, the paragraphs font will be 9px, whatever its height.
In the same time, I also would like that if my viewport height is smaller than 330px, the paragraphs font will be 9px, whatever its width.
I have tried different orders, with or without !important keywords, I can't achieve the expected result.
There is always either the width or the height rule which conflicts with the other.
Could I handle such situation in CSS?
Here is my code :
p{
font-size: 16px;
}
#media (max-width:600px){
p{
font-size: 14px;
}
}
#media (max-width:440px){
p{
font-size: 12px;
}
}
#media (max-width:330px){
p{
font-size: 9px;
}
}
#media (max-height:600px){
p{
font-size: 14px;
}
}
#media (max-height:440px){
p{
font-size: 12px;
}
}
#media (max-height:330px){
P{
font-size: 9px;
}
}
Just use logic for #media queries. You can read more about them here.
For your problem solution would be code below (as comma creates a OR condition)
#media (max-width: 330px), (max-height: 330px) {
p { font-size: 9px; }
}
New to stack overflow, but I was struggling on this one. I recently created my portfolio site which appears to be working across all device break points and the media query on my laptop in Chrome. However, when I go to the site on my phone (tried both Chrome and Firefox) the header line-height disappears. It's crunched and unreadable. Any ideas what might be happening there? I'd really appreciate it! It seems impossible to debug because it's only happening via mobile.
.text--header {
font-size: 30px;
line-height: 38px;
display: block;
font-stretch: none;
margin-top: 95px;
}
#media screen and (min-width: 320px) and (max-width: 630px) {
.text--header {
font-size: 30px;
letter-spacing: -0.04em;
line-height: 32px;
}
}
<div class="ct ct--body">
<span class="text text--header">Jenna is a Product/Visual Designer.</span>
</div>
Actually, the problem in Media query won't forget to follow standard declarations of the media query.
.text--header {
font-size: 30px;
line-height: 38px;
display: block;
font-stretch: none;
margin-top: 95px;
background-color: #ccc;
}
#media only screen and (min-device-width: 320px) and (max-device-width: 630px) {
.text--header {
font-size: 30px;
letter-spacing: -0.04em;
line-height: 32px;
background-color: red;
}
}
<meta name="viewport" content="width=device-width" />
<body>
<div class="ct ct--body">
<span class="text text--header">Jenna is a Product/Visual Designer.</span>
</div>
</body>
Appreciate if it is useful :)
I have viewed my page in every latest device available at the electronics shop.
I cant for the life of me get the fonts correct. Whats massive in latest samsung galaxy is tiny in latest ipad etc etc.
body {
font-size: 62.5%;
line-height: 1.45em;
}
.p {
font-size: 1.7em;
}
#media only screen and (max-width: 1280px) {
.p {
font-size: 1.842857142857143em;
}
}
#media only screen and (max-width: 1024px) {
.p {
font-size: 1.842857142857143em;
}
}
#media only screen and (max-width: 800px) {
.p {
font-size: 2em;
}
}
#media only screen and (max-width: 600px) {
.p {
font-size: 1.9em;
}
}
#media only screen and (max-width: 320px) {
.p {
font-size: 1.9em;
}
}
#media only screen and (max-width: 320px) {
.p {
font-size: 1.9em;
}
}
What the hell am I doing wrong?
Please help. Thanks
You can use Viewport to set the font size for many screen size.
here some info about it:
https://css-tricks.com/viewport-sized-typography/
Browser support list:
http://caniuse.com/#feat=viewport-units
Wild guess: .p should be p. You're selecting a class rather than an element.
I have the following two media queries:
#media (min-width: 320px) and (max-width: 359px){
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 0.5em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 10;
line-height: 0.5em;
color: inherit;
}
.hero-unit {
background: url("../img/now320.jpg");
height: 5em;
width: 15em;
padding: 0.5em;
margin-bottom: 2em;
background-color: #eeeeee;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 0.5em;
color: inherit;
}
}
#media (min-width: 360px) and (max-width: 479px) {
.hero-unit h1 {
margin-bottom: 0;
font-size: 0.2em;
line-height: 1em;
letter-spacing: -5px;
color: inherit;
}
.hero-unit p {
font-size: 0.2em;
font-weight: 50;
line-height: 1em;
color: inherit;
}
.hero-unit {
background: url("../img/now360b.jpg");
padding: 1em;
margin-bottom: 2em;
height: 10em;
width: 18em;
background-color: #eeeeee;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
h2 {
font-size: 2em;
font-weight: 20;
line-height: 1em;
color: inherit;
}
}
I'm trying to figure out why the 320 width rule is not being applied at all to my HTML page, even though I've resized it using the responsive design tool in Firefox to have a width of 320px.
I checked the CSS styles using Firebug to see what's going on. I only see the #media (min-width: 360px) and (max-width: 479px) part being applied. That is, its not a case where the CSS rule I think should be applied is being overwritten. What's happening is the rule is never applied at all. Why?
Sometimes browsers just simply don't allow for a viewport to be smaller than a certain size, and I think that line is down around 360, so it may simply not be registering, even with the tool you mention. I can't say, because I'd need to see the live example.
Have you checked the site on an actual mobile device, or at least an emulator? The Opera Mobile Emulator is pretty easy to use.
As an aside, if you want to work mobile first - there is the idea of writing your CSS for 320 devices first, with no media query, as the 'baseline' experience. That is where you specify font families, colors, generally applied styles. Then you add in media queries to work on larger and larger sizes, and that is where you specify changes in layout and text size. The point being - don't wrap your 320-359 styles in a media query as it will be the basic experience for everyone.
If you wish the 320px rule to be applied for all the page you need to write it like this
#media (min-width: 320px)
without any and (min-width....) after it