Im using 960gs adaptive CSS in all the pages of my site. I have the script below in all the pages:
<script>
var ADAPT_CONFIG = {
path: '/css/960gs/',
dynamic: true,
range: [
'0px to 760px = mobile.min.css',
'760px to 980px = 720.min.css',
'980px to 1280px = 960.min.css',
'1280px to 1600px = 1200.min.css',
]
};
</script>
<script src="/js/adapt.min.js" type="text/javascript"></script>
My problem is that when a user go to another page, the selection of appropriate stylesheet is visible to the user specially when using Mozilla Firefox. What I mean is that at first, the layout takes all the screen and in less than a second, the lay-out changed to the appropriate one. I don't know how to describe this thing. But what I want is to improve it's performance in loading the appropriate stylesheet.
Thanks
On the 960.gs site it states
"A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetched (think of it as “Ajax” for CSS). I have done my best to mitigate this by keeping CSS files small (3 KB). It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions"
So this is a known issue. I have to say I'm not a big fan of doing this with javascript, CSS is perfectly capable of handling different resolutions. If you have your basic CSS and add some separate properties for handling different resolutions as follows:
#media only screen and (min-width: 980px) and (max-width: 1280px) { <<<CSS Here>>> }
#media only screen and (min-width: 760px) and (max-width: 980px) { <<<CSS Here>>> }
#media only screen and (max-width: 767px) { <<CSS for mobile portrait>> }
#media only screen and (min-width: 480px) and (max-width: 767px) { <<CSS for Mobile landscape>> }
Related
Total NOOB at web development and trying to teach myself here and it’s quite daunting to say the least, but I’m having fun nonetheless.
Anyway, I know that media queries affect the way mobile devices render the page on various screen sizes, but I want to know if there’s just one media query that can affect ALL mobile devices regardless of screen size?
I just want to make sure it won’t affect the Desktop.
For instance I want to tweak a navigation menu on all mobile devices, but I don’t want to meticulously change each media query that pertains to a screen size in my style.css.
I just want to create one media query to make this tweak that will affect all mobile screen sizes.
Hope that makes sense.
As always, you all are awesome!
Thanks for your help!
happy that you are choose to learn Web-Development.
But your way sounds more complicated than it is. First, Desktop and Mobile can be the same at all. It only counts down to Media Queries. On a Desktop, your Browser can be have the same width as a mobile device. So you need to clarify in your Project at which point you want to show the User the "Mobile" Styles and when to display the "Desktop" Styles. In most Projects I worked or saw, the default Media Queries are something like that:
#media (min-width: 320px) {}
#media (min-width: 768px) {}
#media (min-width: 1024px) {}
#media (min-width: 1220px) {}
#media (min-width: 1440px) {}
So you see on every media query you can attach some new styles for the selected query size. To make its easier for writing styles and don't override all these things on every new width, you can make something like that:
#media (min-width: 320px) {} // for general stylings (both, mobile && desktop)
#media (max-width: 767px) {} // for only styles between 320px and 768px (most mobile devies)
#media (min-width: 768px) {} // general desktop && tablet styles if needed
#media (min-width: 768px) and (max-width: 1024px) {} // only tablet styles
#media (min-width: 1025px) // start with desktop styling
All these styles between the media queries are only attached to the sizes.
So just choose your needed width, for example:
All mobile styles attached only between 320px and 1024px
#media (min-width: 320px) and (max-width: 1024px) {
.nav{ background: red; }
}
All desktop styles attached only after 1025px
#media (min-width: 1025px) {
.nav{ background: green; }
}
All these media queries just show the different widths, you also can do this by heights, but its way more difficult because of the device/display sizes.
If you really want to check the User Agent and divide between the browser, agents, devices or something like that you will need JavaScript and thats way more complex than just display the styles for different widths.
I hope this helps you! If you have any questions about Media Queries and how to write them correctly, MDN is a good resource: MDN - Media Queries
For anyone looking for a generic and easy media query for mobile, I would suggest the following:
#media screen and (max-width: 767px) {}
Similar to the suggestion by #m4n0, but this is the correct query including the "and". This is a good start, and then you can continue to define more breakpoints as you need more responsiveness along the way.
It depends on is your mobile layout is designed. As even in the mobile view you need to think about Portrait and landscape mode.
For some common styling, I normally use
#media screen (max-width: 767px) { }
You can also use orientation to set media queries like below
#media screen and (max-device-width: 480px) and (orientation: portrait) {
Your classes here
}
#media screen and (max-device-width: 640px) and (orientation: landscape) {
Your classes here
}
Great question, Android and Apple devices in my search normally fall within 450px in portrait and 800px on landscape, I would suggest you create a media query for both these sizes and you would have covered a high number of mobile devices in both portrait mode and landscape mode. If you are targeting a specific device I would suggest looking up those specific screen viewport sizes and adjusting or adding more media queries to cover those cases. Hope this helps! Keep learning.
Credit to following link for Popular Device Screen Resolution Sizes
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
Credit to following link for great explanation of Responsive Design
https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries
I am using this code:
#media (min-device-width: 400px) and (max-device-width: 1020px) {
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}
}
When I view the website on the actual tablet, the code seems to work fine. However, when I view the site on a tablet emulator website, it doesn't work.
Am I doing something wrong with the syntax ?
As far as I understand the emulator is not treated as a "device", therefor the media query does not apply to it. The emulator is likely opening the website in an iFrame, so a simple min/max-width query will apply.
change this:
#media (min-device-width: 400px) and (max-device-width: 1020px) {
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}
}
to this:
#media (min-width: 400px) and (max-width: 1020px) {
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}
}
Here is why:
It is also possible to create queries based on *-device-width; though
this practice is strongly discouraged.
The difference is subtle but very important: min-width is based on the
size of the browser window, whereas min-device-width is based on the
size of the screen. Unfortunately some browsers, including the legacy
Android browser may not report the device width properly and instead
report the screen size in device pixels instead of the expected
viewport width.
In addition, using *-device-width can prevent content from adapting on
desktops or other devices that allow windows to be resized because the
query is based on the actual device size, not the size of the browser
window.
I am developing a website which will be responsive in that different CSS styles are applied depending on the width of the users' browser.
the method chosen was to use CSS media queries.
my problem is this: when I use the following code
#media screen
and (min-width: 200px)
and (max-width: 800px)
{
#example
{
background: purple;
}
}
this works when I resize the window on my PC, but is not recognised by my phone whose resolution is within the limits.
perhaps more perculiarly, when I use the following code
#media screen
and (min-device-width: 200px)
and (max-device-width: 800px)
{
#example
{
background: purple;
}
}
this has the inverse effect: displays on phone, but not on PC.
as far as I have read there is no scope for an "OR" operator for something along the lines of the following to be valid
#media screen
and (
((min-width: 200px) and (max-width: 800px))
| / || / OR
((min-device-width: 200px) and (max-device-width: 800px))
)
{
#example
{
background: purple;
}
}
so my question is this: is there a way test responsive CSS on both desktop and phone simultaneously?
I have tried so many combinations:
using #media only screen,
using Android, Firefox and Chrome browsers on the phone,
but to no avail, the result is always the same.
The only way I can think to do this at the moment is to create two separate stylesheets, one for desktop and one for phone, but this would mean updating two stylesheets every time I wanted to view changes in the browser, which is impractical and counters the idea of responsiveness.
I looked into using the orientation: landscape/portrait target, but as far as I can make out this would again involve writing two sets of CSS.
One last consideration is that the website is currently using pure CSS; so no javascript, user-agent determination nor server-side scripting at this point in time.
This must be possible so any insights will be appreciated. I'm sure someone will have had the same problem and enlighten me.
Try using a viewport meta tag:
<meta name="viewport" content="width=device-width,initial-scale=1" />
Place that into the head section of your page.
This question already has answers here:
How to use particular CSS styles based on screen size / device
(5 answers)
Closed 2 years ago.
I have a crazy web app going on, with all kinds of dynamic widths and heights and vertically centered stuff. It looks great on just about every resolution except 1366x768 and 1280x800. I know how to fix it with some CSS rule overrides. I want to target these SPECIFIC resolutions ONLY (meaning I do NOT want to target 1280x1024 with a min-width: 1280 and max-width: 1280). Please don't lecture me about best practices and stuff, I need a quick and dirty answer.
How can I do this? Surprisingly Google isn't giving me any good results.
You could use:
#media screen and (min-width: 1280px) and (max-width: 1280px)
and (min-height: 800px) and (max-height: 800px) {
/* Crazy CSS overrides here */
}
/* Second variant left as an exercise for the reader */
However, you will probably do better in the long run if you take the time to refactor now - later never seems to get here.
Try this:
#media screen and (max-width: 1280px) and (max-height: 800px)
{
/*write CSS here*/
}
I'm making a website which has 3 breakpoint 768px, 1024px and 1900 px. Which size of CSS is good to keep outside media query containers?
Adding example
All specific styling inside media queries and all common styling outside
h1 {color:red}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px}
}
#media only screen and (min-width: 1024px) {
h1 {font-size:28px}
}
or
Most common used desktop first
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; font-color:red}
}
#media only screen and (min-width: 480px) {
h1 {font-size:18px}
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
or
Mobile first
#media only screen and (min-width: 480px) {
h1 {font-size:18px; font-color:red}
}
#media only screen and (min-width: 1024x) {
h1 {font-size:28px; }
}
#media only screen and (min-width: 768px) {
h1 {font-size:22px; }
}
I believe you mean to ask what CSS should not be inside of the media query blocks, right?
If that is the case I recommend that any CSS that does not change be placed outside of the media query blocks. Any colors, font styling, etc. Any CSS that changes placement of elements, the padding, floats, inline or block display types, any structure-type CSS is what I would put in the media query blocks.
Update: To respond to the updated question, are you asking which order you should put the media blocks in? If that's the case as far as I know it doesn't really matter what order they go in. But to comment on the number of possible media queries, I would separate that CSS into different style sheets just to make it more maintainable. Your media queries would then be a part of the links to your style sheets in your HTML.
There are so many ways to approach this problem - and the decision may be different depending on the circumstances. For example, is there an existing site that you are reverse engineering to be responsive or are you starting from scratch?
STARTING FROM SCRATCH
If starting from scratch, one method is to create all of the basic styles OUTSIDE of any media query - so that these styles can be seen by any device (especially those devices that do not support media queries).
Basic styles could include just colors, and fonts etc - or it could be everything except layout.
Then, media queries are used to add the different layouts on top of the basic styles.
MIN or MIN AND MAX
The next question is how will you work your different media queries...
Will you allow them to be applied on top of one another - in which case you may start small and build up - using min-width only.
For example:
#media only screen and (min-width: 600px)
OR you may want to set them in a series of brackets - so that styes for one size do not interact with another size.
For example:
#media only screen and (min-width: 600px) and (max-width: 800px)
Again, there is no right or wrong - both have strengths and weaknesses. The first option allows you to use styles that flow through all widths. The second option allows you to fully control styles that appear in a specific width - without having to deal with the cascade.
DEALING WITH IE
There are a range of ways for dealing with older versions of IE including.
allow IE to see basic styles only
place media queries in separate CSS files and link to these files using media queries... then also link to a selection of these files (like wide screen CSS files only) via conditional comments.
Use some sort of JS solution like respond.js or others to force IE to understand the media queries.
HTH
I've read many articles recently that suggest starting with the smallest resolution first and working your way upwards using media queries. To me that also makes a lot of sense. The only problem is old browsers (IE) not understanding media queries. There are solutions to that problem though (if you Google).