How to make the body width equal to the device-width automatically in CSS3 media query?
Just use width: auto;
Difference between width: 100%;
and width: auto;
is that outer width for 100% is 100% + padding-left + padding-right
, inner 100%
. Outer width of width: auto
is 100%
, inner width is 100% - padding-left - padding-right
if and only if display
is block
and no float
is set (and no floated element without clear is before).
using device width in media query
What if to do something like this in the media queries:
body {
width: @device-width + 270px;
}
Ideally main
takes 100% of device-width, and sidebar shows on scroll.
How can I apply a Media Query to both Height and Width?
@media (min-height: 768px) and (max-height: 768px) and (min-width: 1366px) and (max-width: 1366px) { ... }
Here is the possible duplicate question:
Media Queries: check min-height and min-width?
Here are a few references from the question :
First reference
Second reference
HTML/Body Width doesn't fit 100% Device Screen
For me the problem was in the media queries:
the attribute "font-size"
letters and words was bigger than her container, decreasing adjusted by itself
Media Queries: How to target desktop, tablet, and mobile?
IMO these are the best breakpoints:
@media (min-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
Edit: Refined to work better with 960 grids:
@media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
In practice, many designers convert pixels to em
s, largely because em
s afford better zooming. At standard zoom 1em === 16px
, multiply pixels by 1em/16px
to get em
s. For example, 320px === 20em
.
In response to the comment, min-width
is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.
Regardless of whether you prefer min-
, max-
, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.
Can media queries resize based on a div element instead of the screen?
Yes, CSS Container Queries are what you're looking for. The CSS Containment Module is the specification that details this feature.
You can read more about the decade of work, including proposals, proofs-of-concept, discussions and other contributions by the broader web developer community here! For more details on how such a feature might work and be used, check out Miriam Suzanne's extensive explainer.
Currently only Chromium 105+ supports Container queries out of the box, though Safari 16 will include support as well. Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).
Media queries aren't designed to work based on elements in a page. They are designed to work based on devices or media types (hence why they are called media queries). width
, height
, and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. They cannot be used to refer to a certain element on a page.
If you need to apply styles depending on the size of a certain div
element on your page, you'll have to use JavaScript to observe changes in the size of that div
element instead of media queries.
Alternatively, with more modern layout techniques introduced since the original publication of this answer such as flexbox and standards such as custom properties, you may not need media or element queries after all. Djave provides an example.
$(window).width() not the same as media query
If you don't have to support IE9 you can just use window.matchMedia()
(MDN documentation).
function checkPosition() {
if (window.matchMedia('(max-width: 767px)').matches) {
//...
} else {
//...
}
}
window.matchMedia
is fully consistent with the CSS media queries and the browser support is quite good: http://caniuse.com/#feat=matchmedia
UPDATE:
If you have to support more browsers you can use Modernizr's mq method, it supports all browsers that understand media queries in CSS.
if (Modernizr.mq('(max-width: 767px)')) {
//...
} else {
//...
}
Related Topics
CSS-Hack - Adding CSS in The Body of a Website
Overflow (Scroll) - 100% Container Height
What Font Format Should I Use for My Site
CSS: Before and: First-Child Combined
How to Order My CSS Columns Horizontally Instead of Vertically
Position: Relative Appearing Over Position:Absolute
Fontawesome Instagram Icon - Colorized
In Sass, What's The Difference Between The @Mixin and @Extend Directives
Make Flex Item Full Width After It's Been Wrapped Without Using Media Queries
How to Use Pseudo Selectors in Material-Ui
Rails Bootstrap How to Format Form_For (Width Grid Collapses)
How to Enlarge The Svg Icon in Material-Ui Iconbuttons
React-Datepicker Input Width Will Not Adjust to 100%
Why Does Bootstrap Include a Bootstrap-Theme File
How Does 'Flex-Grow:0' Get Interpreted
How to Get a Rotated Linear Gradient Svg for Use as a Background Image