I tried to search but I didn't found suitable answer.
I want to create Canvas that users can draw on it.
But from what I read before there is no option to set canvas size in percent.
So I need to give it fixed value in px, so my question is:
Which width size will suite to all resulution without scrolling horzintally ?
Depends on the users who are going to use the canvas and what it is going to be used for. I would recommend the following:
#media (min-width: 300px) {
.myCanvas{
width:300px;
height:533px;
}
}
/*Large phone Size*/
#media (min-width: 600px) {
.myCanvas{
width:600px;
height: 1066px;
}
}
/*Tablet and Standard Size*/
#media (min-width: 1920px) {
.myCanvas{
width:1920px;
height:1080px;
}
}
Unfortunately, the above code won't work (which is a bummer) as the width and height need to be defined in the HTML tag, however you can still use these sizes for scaling purposes depending on who you're designing the canvas for.
Related
If I check HTML on 2 different Systems with different resolutions then the view is distorted.
Is there any way of calculating the screen width and height at run time?
I lack experience with CSS but did some research and found about media queries, but there they are suggesting different classes (if i am not wrong).
My question is it possible to get the height and width at run time and use only one css ?
something like :
.view {
min-width :"some how gets computed:which device we are using ?"
min-height :"some how gets computed:which device we are using ?"
}
Media queries is a good choice for your problem.
You don't have to use different classes for these, just you have to define different behaviour based on resolution.
You can know the screen height and width by Javascript, but with CSS, I dont think that is possible. The best you can do with css is to define range of devices as in Mobiles, Tablets, Laptops, Really Large screen Devices and based on media queries you can define what a class do on certain type of device.
Have a look a below example:
/* For Mobile */
#media screen and (max-width: 540px) {
.view {
width: 400px;
}
}
/* For Tablets */
#media screen and (min-width: 540px) and (max-width: 780px) {
.view {
width: 600px;
}
}
Actual dimensions can vary as per your case.
This is the same method many framework uses to implement responsiveness.
In your example you want to set a min-width ou height, so you probably just need to use a value computed out of the screen size. If that's the case, you can use the units vw or vh, which mean 1% of screen width and 1% of screen height, respectively.
.view {
min-width: 42vw; /* Equals 42% of screen width */
min-height: 58vh; /* Equals 58% of screen width */
}
By using the calc() function you can get more sophisticated results. And to that end, you might also like to look into CSS variables. For example:
.view {
min-width: calc( 42vw - 12px );
min-height: calc( 58vmin / var(--precalculated-scaled-value) );
}
But if you need multiple rules, like changing layout, colors, fonts etc, than you need media queries. In its most basic form you'd do something like:
#media (min-width: 800px){
.class{
/* Your styling goes here */
}
}
In the example above, any styling inside the media query would kick in if the screen is at least 800px wide. (I wouldn't load different CSS files depending on the screen size, btw.)
Finally, since you used the word "resolution", I feel I must add that you can set the media queries to match screen resolutions, too. This comes in handy when serving large images. For example:
#media (min-width: 1200px),
(min-width: 600px) and (resolution: 200dpi) {
.my-image{
content: url("http://example.com/high-def-image");
}
}
That could be used to serve a higher res image as a progressive enhancement to larger screens or retina displays.
You can combine different attributes in single media query. This example will apply these styles on all screens with width at least 500px and height at least 400px:
#media all and (max-width: 500px) and (min-height: 400px) {
body {
background: #ccc;
}
.someclass {
padding: 10px;
}
}
Nope. they are not suggesting different classes.
With media queries you can set differents css rules based on screen (or media) resolution (width, height, aspect-ratio...) in a single file, or you can include different stylesheet based on the query.
I suggest you to follow a tutorial to start using media queries.
I'm writing my first Phonegap app, and I'm having a bit of a headache dealing with all the different screen sizes. So, since my app is aimed only at phones I think I know how my ideal solution would work, but I'm just totally clueless as to how I would implement it.
Basically, I want the entire page to behave like an image. Rather than staying the same size and wrapping into new lines as the screen gets smaller, I want the actual font size of the text to decrease, maintaining all the spacing and proportions of the design. I've tried using only percentages to define margins, widths, font sizes, etc., but it hasn't worked exactly as I'd like.
If you want something like image that will shrink/decrease the fontsize, spacing, and proportions of design, you have to write media queries accordingly.
#media only screen and (max-width: 550px) {
.title {
font-size:11px
}
.body-box {
width:440px;
}
}
#media only screen and (max-width: 600px) {
.title {
font-size:12px
}
.body-box {
width:480px;
}
}
#media only screen and (max-width: 650px) {
.title {
font-size:13px
}
.body-box {
width:520px;
}
}
This also has some drawbacks. For very small-screen displays or low-resolution displays(around 350px), if you keep this ratio, it will be about 7px and that size is too small to read. If anyone sees on QHD tab (2160px), the font size will be 44px which will be very large.
The long term and perfect solutions to an app like yours will be to start a responsive design.
You can start designing your HTML app layout using Bootstrap. It's responsive and mobile first, and it will maintain the layout.
Otherwise you can use onsen.io framework, which is also a responsive HTML5 framework for Cordova and Phonegap.
I am picking up an existing free template Jessicawhite at html5xcss3.com
I notice the images stretch 100% in any screen and in large screen (MAC wide screen for e.g.), it looks really ugly especially the home page slider.
I want to center the whole page/body if the screen is larger than the max size of my images (1280px, sized in the server) like in this site: igihe.com I tried playing with bootstrap-responsive.css. The highest screen it deals with is 1200px min.
#media (min-width: 1200px) {
}
My attempt was for screens with minimum 1400px:
#media (max-width: 1200px) {
//leave original intact
}
#media (min-width: 1400px) {
body {width:1366px; margin:0 auto;}
/* OR */
.body_container {width:1366px; margin:0 auto;}
}
As well, I just tried changing the min-width:1200px to min-width:1400px but it doesn't behave well either.
My issues are: it doesn't correctly react. My screen size is 1366px, which is less than 1400px yet it applies the body styles.
Need i add all the specs under each media to each screen size after words? Meaning, the min-width:1200px contains a bunch of specs. Does that mean each screen size has to define it?
Any shorter solution that puts the menu in consideration?
You can just use the simple css3.
use a wrapper division o wrap all your elements and this wrapper have a display:none; by default for all width of media.
.wrapper{
display:none;
width:your-width-num px;
margin-right:auto;
margin-left:auto;
}
And for the wider screens:
#meida(min-width:your-width-num) {
.wrapper{
display:block;
}
}
I'm trying to do a CSS for just my desktop, therefore i used the media query like below to link my css with my desktop.
My desktop resolution is 1440 x 900. Hence, my media query css for desktop is like this below
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
}
}
I tried used this method as well.
#media only screen and (max-width : 1440px){
}
Unfortunately, it's not working. I checked the various media query tutorial and this seems to be the correct way to implement css for my desktop resolution 1440x900.
May i know did i do anything wrong here?
Try adding one pixel to your max-width , #media (max-width: 1441px)
I checked the code and it working fine, make sure that you referenced id's in html page also.
Check this URL : http://jsfiddle.net/Ravichand/8kznk/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
color:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
color:skyblue;
}
}
I checked that and it works, here you can find example
http://jsfiddle.net/7VVsA/
#media (max-width: 1440px) {
#loginpage {
position:relative;
margin-top:15%;
background:red;
}
#headerbodyadmin {
position:relative;
margin-top:20%;
background:yellow;
}
}
Solution 01: Instead of max width. you can use min-width
Like
/*Sizes above 1024*/
#media (min-width: 1024px) {
}
Solution 02: Or you can try adding +1 to your width
Like
/*width 1441 to avoid any other conflict */
#media (max-width: 1441px) {
}
The width and height attribute describes the length for the view port and not the device screen resolution as device-width and device-height. If you use the width attribute it is possible that the considered value is smaller then your screen resolution width, because there is a border around the window or a scroll bar. Browsers on mobile devices usually utilize the entire width of the screen, so you don't see this effect there. Here what MDN says to the width attribute:
The width media feature describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer).
So if you want to trigger the styles if your device has a width resolution of 1440px I would use it like this:
#media (max-device-width: 1440px) {
/* your style */
}
You can read more about this in the MDN documentation. Maybe this question is also interesting.
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;
}