Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have the following queries on my WordPress theme, and they are alot ;/
I am new to WordPress so i can't understand them correctly, but i am sure i will understand your explanation .
here is what I don't understand.
1: I don't understand for which screen's they are.
2: I don't understand what the "max" ( this one is very strange )
3: will the max width terminate the setting or something ? because we have min 600 and max 600
here is the code.
1) screen here means the screen of the device itself (not a print as print is the common one). But this has same effect as
#media (min-width: 312px)
Just you are specifying that you want the max-width of the screen on that the website loaded, that's it
2) the max means the maximum width of the device screen to which the following styles are applied.
for eg:
#media screen and (max-width: 768px){
//These styles will apply only if the screen size is less than or equal to 768px
}
3) There is no termination. If you have max and min with 600px, then the styles will applied as per the position of the code. The code that comes below will apply (if min code is at line number 10 and max code at line number 20 then max will work)
Screens are not printed on paper or read out through a speaker. They are screens like the ones on a smartphone, laptop or monitor, and the rules apply to all of them (which also meet the and condition).
Max is a standard English term. The rules apply unless the width is more than the maximum defined. It won't terminate anything, the rules inside it just apply when the condition is met.
because we have min 600 and max 600
… with different sets of rules. Some apply when the width is at least 600px and some apply when it is no more than 600px.
With mediaqueries you can determine on which resolution your styling will be applied max means if the screen size is bigger than your number the styling in the media query will not be applied. Same with min if screen size is lower than your number styling will not be applied. Screen means that you styling will be applied when the medium has a screen for example you could write print than the styling will only be applied if you print your website.
A media queries detect media type which are currently using your
website in this case is screen so any device - you can also put
specific css for print - to make your website be print friendly.
Using Media Queries are core of RWD - responsive web design.
min-width its saying browser 'please use this block of css rules if viewport of your browser is min 312px so basicly every device
which has viewport size bigger than 312px.
max-width its saying please do this block of css rules if viewport of device is bigger than 456px - so all devices which has
455px and less will not run this css rules.
There is also state like #media screen and (min-width: 200px) and (max-width: 1000px) {} - its targeting devices which has more than 201px and less than 999px of viewport size.
Links:
https://www.emailonacid.com/blog/article/email-development/emailology_media_queries_demystified_min-width_and_max-width
https://developer.mozilla.org/pl/docs/Web/CSS/Media_Queries/Using_media_queries
The media-queries are basically a simple if statement on other programming languages.
screen: The screen is used to define the rules only for computer screens, tablets or smartphones. There are other media-types like projection or print.
max-width: specifies the maximum width of the screen (or media) for the CSS rules. All rules in this part are for screens lower and equals the value.
min-width: specifies the minimum width of the screen (or media) for the CSS rules. All rules in this part are for screens larger than the value.
Example #1 (using min-width):
#media screen and (min-width: 456px) { ... }
The CSS rules in this part are only used for computer screens, tablets or smartphones with a minimum screen width of 456 pixel.
Example #2 (using max-width):
#media screen and (max-width: 456px) { ... }
The CSS rules in this part are only used for computer screens, tablets or smartphones with a maximum screen width of 456 pixel.
CSS3 Media Queries: https://www.w3.org/TR/css3-mediaqueries/
Most media features can be prefixed with "min-" or "max-" to express "greater or equal to" or "less than or equal to" constraints. This avoids using the "<" and ">" symbols, which would conflict with HTML and XML. If you use a media feature without specifying a value, the expression resolves to true if the feature's value is non-zero.
Hopefully this guide will help you understand how this works: Link
You should also check out this guide to the different screen sizes:
Link
Related
how can i change the value of my "height" element when the device or width/height changes? my default height size is 180px (that's a rectangle in LG(large screen) but the height doesn't change when i try visit in mobile device (XS) mode.
i want to increase the value of "height" when someone visits website from XS or mobile devices.
i"m using bootstrap 3.3.7 in my project.
Defining Proper Media Queries
Bootstrap has clearly defined breakpoints for different kinds of
devices, specified by using CSS media queries. The following are the
breakpoint categories used for the different types of devices:
Extra Small Devices (e.g. cell phones) are the default, creating the “mobile first” concept in Bootstrap. This covers devices
smaller than 768px wide.
“Small Devices” (e.g. tablets) are targeted with #media (min-width: 768px) and (max-width: 991px) { ... }.
https://www.sitepoint.com/responsive-web-design-tips-bootstrap-css/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
I am trying to create a responsive webpage using bootstrap,but I'm confused on how to start.Can anyone help me to move into the right direction?
Here is my code
https://jsfiddle.net/c30a7bd2/It should be responsive for all the devices.
Despite the downvotes, here's some info to get you started.
Process:
Design from smallest viewport to biggest. i.e. design your responsive site first for mobile devices in portrait, then mobile landscape, then tablet portrait, then tablet landscape, then smallest desktop, then largest desktop. If you look at the Chrome dev tools, you will see an icon on the left-top to the right of the arrow icon. This puts the browser into responsive design mode that lists the most common devices. Very helpful.
Learn about media queries:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
There is a lot of stupid confusion about how to use #media queries correctly. Let me set you straight right from the beginning.
You only need to worry about min-width. Don't think about ranges, don't use anything else other than min-width.
Here's why.
Since we're writing our css from the smallest device width first, as browser widths increase all we're doing is overriding earlier set styles. That's it. That literally is the secret to doing great, simple responsive css coding.
What breakpoints to use:
Again, lots of clever engineers try to be too clever. They introduce odd breakpoints, try to avoid pixel 'px' definitions, etc. Stop doing that.
Remember, since we're are writing our code mobile portrait first (the smallest device size), there is no media-query for this. Its just css.
Here's the breakpoints you should start with:
/* all mobile portrait coding goes first */
#media all and (min-width: 480px) {
/* this is the most common mobile landscape minimum width */
}
#media all and (min-width: 768px) {
/* this is the most common minimum tablet width */
}
#media all and (min-width: 1024px) {
/* this is the most common minimum desktop width. It also is the
most common minimum tablet landscape width. */
}
#media all and (min-width: 1300px) {
/* this is the most common minimum wide desktop width.
This is the only media query you might consider setting to 1200px
if your graphic design requires it. */
}
That's it. That is quite literally everything you know to get started writing great responsive css.
Just remember the key concept is utilizing inheritance. 80% of your css should probably be written for the mobile portrait size first. All of those styles get inherited into wider and wider screen widths. Then override them as necessary for the new wider screen. You will find that as your media queries increase, there is less and less css in them.
Have fun and write great code!
According to https://developer.mozilla.org/en-US/docs/Web/CSS/#import,
list-of-media-queries is a comma-separated list of media queries
conditioning the application of the css rules defined in the linked
url. If the browser doesn't support any of these media types, it won't
even load the linked resource.
So what I want to know is, if I have:
#import url('portrait.css') screen and (orientation:portrait);
does this mean that if or when I resize the width of the web browser on my desktop PC so the width is less than the height of the web browser, the portrait.css file will override the current style?
Or does it only load the portrait.css file on page load and if the viewport width is already less than its height?
http://www.hongkiat.com/blog/css-orientation-styles/
#media all and (orientation:portrait) {
/* Styles for Portrait screen */
}
#media all and (orientation:landscape) {
/* Styles for Landscape screen */
}
so whenever width is less than height , this shall be a portrai , eventually will load your css file , even if the original screen was initialized at landscape.
That'll just make your imported css file to work on certain conditions. That's one of my favorite feature, too. For example, you have this piece of code:
body {
color:green;
}
When you import this using the conditional media query, for example orientation:portrait, your style will be 'modified' so that if the orientation is portrait, the color will change to green.
Quoting from csswg's documentation of the media query:
The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.
A simple case is if you use a mobile browser, of course. Since the orientation is generally portrait. In the desktop, this would take effect if you resize the window, and thus changing the orientation.
An excellent example is here in this page
I require assistance in constructing a media query, which will allow me to target desktops/laptops. I'm using the table below as a reference for display sizes.
Listed sizes in the Display Size list correspond to the Optimal Canvas Width list.
Display Sizes (in pixels):
800x600
1024x768
1280x800
Optimal Canvas Width (in pixels):
width 780
width 960
width 1220
The table I'm using as a reference basically lists layout widths to use for each display size, but that is not what I'm confused about. What I don't understand is how to construct a media query for all styles within these widths.
This is what I have so far:
<link rel="stylesheet" href="file.css" media="only screen and (min-width: 780px) and (max-width: 1220px)">
All I want to know is if I'm doing this right. Hope I've explained this clearly enough! Thanks in advance!
Not sure about the 'only', but otherwise it looks fine. This will match screens between 780 and 1220px wide. You should add other queries for other sizes to include different files for those sizes.
Remember not to specify a min-width for the smallest, and no max-width for the largest, otherwise you won't have any (specific) styling on very small or very large screens.
Note that you can test your media queries quite easily. Just resize your browser window.
I have a div and I'm trying to figure out how to get it to occupy the same amount of screen space regardless of device display density.
For example, let's say I have two devices that are each 5 inches wide. The first display has a device-pixel-ratio=1, and the second has a device-pixel-ratio=2.
Device 1: 5 inches wide, device-pixel-ratio=1
Device 2: 5 inches wide, device-pixel-ratio=2
So the second device has twice as many pixels packed into the same space.
My div style:
.myDivStyle {
width: 100px;
height: 50px;
}
If I understand correctly, Device 2 would appear to render the div at half the width/height as on Device 1.
If that's the case, is there a way to define our width/height in a device-independent unit? Or do we have to scale all our styles manually on page load etc after we examine the device-pixel-ratio attribute?
Thank you
Redefining your css size by using em unit would be good.
Some good links in this reference. Please check these
w3.org
w3.org
css-tricks
All the above links urge that, em is best suitable in cases when you want your document to behave well on wide range of devices.
This sounds more like you need to work with percentages instead of pixels. So it will use a "percentage" amount of your screen
.myDivStyle {
width: 50%;
height: 25%;
}
It would solve the problem with the ammount of pixels. This would solve the issue if your working with the screen of an Iphone and an Android, since they use two completely different resolutions. For instance, i believe the Iphone uses 320 by .. something, while my own Samsung Galaxy uses i think 480 by something. (dunno the true values)
Most of the devices would come under the following 3 resolutions
1) HVGA-Half of VGA (320 x 240)
2) WVGA- wide VGA(800x 480) - nearly 1.5 times of HVGA
3) HVGA 2x- (640 X 960) - IPHONE 4 uses this resolution
Write seperate css files for the above three resolutions by
#Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}
or
#Media screen and (min-device-pixel-ratio: 2)
{/* css files here*/
}
Do the same with other resolutions. A css class created in 1 resolution should be copy pasted in all three resolutions to get a perfect view. By this way you can showcase a perfect device specific style