I make an exercise about html with several input buttons:
http://bullmalay.appspot.com/
I visit it on my mobile. But I find the text size is really small. I think the reason is about resolution.
Can anyone help me about the text size? I want it can display the similar size in my laptop.
ps.
I have searched about css:#media (min-width: 702px) and then set the font size. But I think even a small device can have a resolution high than my laptop.The size will be smaller than it display on my laptop screen.
I think the size should be: fontSize * (width per pixel of my laptop)/(width per pixel of that device). But I am not familiar about css.
Thank you all. I have learned a lot. But I find the reason myself.
The browser on mobile device will auto scale the page to adapt the mobile screen. I just add this line to the html and it works:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
You may use something like #media handheld and (max-width: 500px). But unfortunately, I don't think there's a way to use CSS like
fontSize * (width per pixel of my laptop)/(width per pixel of that device)
There is only one way so far that we know, you need to do some thing like this
#media (max-width: 300px) {
html { font-size: 70%; }
}
#media (min-width: 500px) {
html { font-size: 80%; }
}
#media (min-width: 700px) {
html { font-size: 120%; }
}
#media (min-width: 1200px) {
html { font-size: 200%; }
}
Well ther is one thing you can do, You probably want to set your font sizes in pt units (1pt = 1/72 inch), which are resolution-independent and designed to look the same apparent size in any resolution.
Try adding the below code
body{
-webkit-text-size-adjust: none;
}
Related
So I'm a newbie when it comes to bootstrap. I came across the web and found out that I can make my containers look the same on all screens by using this code?
#media (min-width: 1200px) {
.container-small {
width: 700px;
}
.container-large {
width: 1500px;
}
}
Can someone please explain this more to me and tell me how it works.
#media (min-width: 1200px) {
}
This tell to the PC, when the screen width is equal or less than 1200px the boxes you edited before in CSS are going to have a different behavior.
I mean if I have a div which width is 500px and, of course, in a cellphone doesn´t look good, you while using this metod of #media can change the size and behavior of your div and the elements that contains, without affect your original size in the desktop.
https://www.youtube.com/watch?v=6Yh8y0pVfQc&ab_channel=Flux
In this video is explained very well. I hope it can helped you!
(It works on other browsers but not chrome)
I want to apply a style only when the browser size is less than 1400px
with max-width not working
#media only screen and (max-width:1400px) {
.heading-left {
left: -0.5%;
}
}
with min-width its working
#media only screen and (min-width:480px) {
.heading-left {
left: -0.5%;
}
}
But also alters when browser width is above 1400px (I know thats how it works but max-width is not working)
Fiddle for this
https://jsfiddle.net/j4Laddtk/
Have you tried adding the viewport in?
<meta name="viewport" content="width=device-width, initial-scale=1">
Working JSFiddle
Viewport is used when rendering responsive pages and is therefore mostly used when dealing with mobile websites, but when dealing with media queries it helps tell the CSS what the actual device-width is.
Is your browser zoom-ed at different than 100% level ? If so, zoom to 100% (Ctrl+MouseWheel)
Try this method.
This will target based on device
#media screen
and (max-device-width: 1400px)
and (min-device-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
To target based on browser window area
#media screen
and (max-width: 1400px)
and (min-width: 480px)
{
.heading-left {
left: -0.5%;
}
}
You need to place the #media queries after you declare your standard
Another thing that can happen is that you do something really stupid like:
#media only screen and (max-width: 1400) { ... }
Make sure you put the px to identify what the quantity of your max-width is.
#media only screen and (max-width: 1400px) { ... }
Not that I've ever been stuck for an hour on something so simple..
This worked for me
#media screen and (max-width: 700px) and (min-width: 400px) {
.heading-left { left: -0.5%; }
}
If you've tried everything and you're still stuck, remember that media queries need to be at the bottom because CSS is applied from top-down.
If you have
.container {
color: white;
}
and you want the font to be pink for screens less than 600px wide, your other media query needs to be below the original .container style.
.container {
color: white;
}
#media only screen and (max-width: 600px) {
.container {
color: pink;
}
}
So if your media queries are at the top the default colour of white will override the media query for pink.
This problem caused me several hours to figure it out with Bootstrap 3 when it just doesn't work. The reason is in the header of each web page, it needs this meta view element.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More details https://www.w3schools.com/css/css_rwd_viewport.asp
#media only screen and (max-width: 1000px) {
/*Don't forget to add meta viewport in your html*/
}
If it's not working try to inspect elements in the browser by navigating to the network in developer tools and toggling disable cache.
Sometimes it's not working because of the browser cache.
There is one thing I would like to add here, which is only applicable if you have different CSS files. If some values do not seem to be having any effect then check if the CSS file that has the media queries is at the bottom inside the element or not. It is best to always put the media queries CSS file (if made in a different file) at the bottom of all other CSS links.
I havet tried reading about making font sizes responsive and about using device-width for mobile browsers. But I just cant seem to make sense of it. The font size in proportion to the window is a lot different between mobile and desktop browsers. How can I solve this?
This is my current css for my h1:
h1 {
font-size: 3em;
}
#media (min-width: 520px) {
h1 {
font-size: 3.5em;
}
}
#media (min-width: 760px) {
h1 {
font-size: 4em;
}
}
#media (min-width: 960px) {
h1 {
font-size: 5em;
}
}
And yes, I have included this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
There are varying ways to solve this. When I can get away with it (simple layout, content-driven site) I leave 1em alone, letting the device figure out what size the text should be for it. Everything is scaled from there.
Since ems are relative measurements, you shouldn't be setting the size of your headings differently for every width of device. Set your heading at 2em or wherever you want it, and then let it scale from the base font size on body. Then, if you have to do any scaling at all, just set that base font size and the rest of the page falls in line.
I ended up using font-size:10vw instead. i'll just use a fallback to correct for lack of browser support :)
I am making a website with html5 and css. I am trying to make this website responsive, but I don't know why the size of the font stay the same when I resize the browser window, even when I'm using em or percentages such as: font-size: XXem or font-size: XX%.
How can I make font resizable?
For HTML5 web pages I would highly suggest using Viewpoint Width/Height values. They function similarly to % but are font sizes that resize with the window.
For example...
.some-paragraph{
font-size: 5vw;
}
This would set the font-size to always be 5% of the current viewport width, even on re-sizing!
Learn more here: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
Note: You may need to have this in your head:
<meta name="viewport" content="initial-scale=1">
It's called Responsive
#media screen and (max-width: 1024px) {
your font style goes here
}
#media screen and (max-width: 950px) {
your font style goes here
}
#media screen and (max-width: 650px) {
your font style goes here
}
#media screen and (max-width: 480px) {
your font style goes here
}
Check your media queries, they should be controlling your font size, if you're using responsive techniques.
A code sample would help.
Give rem a shot. Works better than % or em.
http://snook.ca/archives/html_and_css/font-size-with-rem
You should definitely use CSS media queries to style based on a range of screen ratios and specifications, but here's an example using both rem units and jQuery to make the font smaller when you resize the browser width. Fiddle here.
CSS
html { font-size: 90.5%; }
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem; }
JavaScript/jQuery
$(document).ready(function () {
var holdWidth = $(window).width();
$(window).on('resize', function () {
newPercentage = (($(window).width() / holdWidth) * 100) + "%";
$("html").css("font-size", newPercentage)
});
});
and here's an example averaging both the width and height for the new font size percentage:
$(document).ready(function () {
var holdWidth = $(window).width();
var holdHeight = $(window).height();
var holdAverageSize = (holdWidth + holdHeight) / 2;
$(window).on('resize', function () {
newAverageSize = ($(window).width() + $(window).height()) / 2;
newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
$("html").css("font-size", newPercentage)
console.log(newPercentage);
});
});
.text {
font-size: 50px;
}
#media only screen
and (min-width : 300px)
and (max-width : 500px) {
.text {
font-size: 20px;
}
}
#media only screen
and (min-width : 500px)
and (max-width : 800px) {
.text {
font-size: 30px;
}
}
</style>
<div class="text">Test Text</div>
you can fix this by using #media query's and a viewport in your css , and add this meta tag to your html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the #media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
#media screen and (min-width: 820px) and (max-width: 920px) {
#viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, #media screen and (min-width: 1200px){ #viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
This is called adaptive or responsive design and is pretty easy to do
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
This might help. Responsively adjusts the text size, according to the window size, but keeps it just large enough for mobile compatibility
http://typecast.com/blog/a-more-modern-scale-for-web-typography
How are you specifying your baseline font-size (against your html or body tags in your CSS file)? If you're setting this value to a pixel (or other fixed measure) or inheriting a browser default font size your percentage or em values will always be a percentage of these defaults.
The most common approach to building responsive sites is to do a 'mobile first' approach whereby your default style sheet handles the base styling for your site on a small screen, then use media queries in CSS to tweak the styles as screen size increases. Are you using any media queries/breakpoints currently?
font-size: 25vmin;
This was very good resizing font in both height and width.
You dont need anything in the head.
Is there a way to scale font-size without using JavaScript? For example if you open the webpage on a 15" laptop and a container div was 400px wide and the font was defined to fill the entire div. Then you open the website on a 17" screen and the div is 600px. Is there a way to make the font automatically scale?
In essence its adding a "width: 100%" to text, which you cant do. I would much rather do it without JavaScript because I am already using a lot in the webpage and it becomes messy after a while.
Any help would be appreciated.
Thanks in advance.
You can use media queries for that. Depending on the width of your page/container you can set the font size accordingly.
For example:
#media only screen and (max-device-width: 480px) {
#container { font-size: 90%; }
}
#media only screen and (max-device-width: 600px) {
#container { font-size: 100%; }
}
Add media queries your css file.
#media only screen and (max-width: 800px)
{
body
{
//font-size or what you want to change
}
}
Or write external file and import it:
<link rel="stylesheet" href="http://domain.tld/screen.css" type="text/css" media="MediaCssId" />
Thanks for all your help everyone, but what I ended up doing was just using text-align: justify. It's not exactly what I wanted, but its a solution to stretch the text. I appreciate all your help.