发表新帖
发表新帖

Can media queries resize based on a div element instead of the screen?

前端 未结
关注
11 1669
[愿得一人]
[愿得一人] 2020-11-22 04:17

I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is jus

相关标签:
11条回答
  • 予麋鹿
    2020-11-22 04:38

    I was also thinking of media queries, but then I found this:

    • http://www.mademyday.de/css-height-equals-width-with-pure-css.html
    • Maintain the aspect ratio of a div with CSS

    Just create a wrapper <div> with a percentage value for padding-bottom, like this:

    div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}
    <div></div>

    It will result in a <div> with height equal to 75% of the width of its container (a 4:3 aspect ratio).

    This technique can also be coupled with media queries and a bit of ad hoc knowledge about page layout for even more finer-grained control.

    It's enough for my needs. Which might be enough for your needs too.

    0 讨论(0)
  • 故里飘歌
    2020-11-22 04:39

    For mine I did it by setting the div's max width, hence for small widget won't get affected and the large widget is resized due to the max-width style. 

      // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }
    0 讨论(0)
  • 不思量自难忘°
    2020-11-22 04:40

    I ran into the same problem a couple of years ago and funded the development of a plugin to help me in my work. I've released the plugin as open-source so others can benefit from it as well, and you can grab it on Github: https://github.com/eqcss/eqcss

    There are a few ways we could apply different responsive styles based on what we can know about an element on the page. Here are a few element queries that the EQCSS plugin will let you write in CSS:

    @element 'div' and (condition) {
  $this {
    /* Do something to the 'div' that meets the condition */
  }
  .other {
    /* Also apply this CSS to .other when 'div' meets this condition */
  }
}

    So what conditions are supported for responsive styles with EQCSS?

    Weight Queries

    • min-width in px
    • min-width in %
    • max-width in px
    • max-width in %

    Height Queries

    • min-height in px
    • min-height in %
    • max-height in px
    • max-height in %

    Count Queries

    • min-characters
    • max-characters
    • min-lines
    • max-lines
    • min-children
    • max-children

    Special Selectors

    Inside EQCSS element queries you can also use three special selectors that allow you to more specifically apply your styles:

    • $this (the element(s) matching the query)
    • $parent (the parent element(s) of the element(s) matching the query)
    • $root (the root element of the document, <html>)

    Element queries allow you to compose your layout out of individually responsive design modules, each with a bit of 'self-awareness' of how they are being displayed on the page.

    With EQCSS you can design one widget to look good from 150px wide all the way up to 1000px wide, then you can confidently drop that widget into any sidebar in any page using any template (on any site) and

    0 讨论(0)
  • 挽巷
    2020-11-22 04:41

    This is currently not possible with CSS alone as @BoltClock wrote in the accepted answer, but you can work around that by using JavaScript.

    I created a container query (aka element query) prolyfill to solve this kind of issue. It works a bit different than other scripts, so you don’t have to edit the HTML code of your elements. All you have to do is include the script and use it in your CSS like so:

    .element:container(width > 99px) {
    /* If its container is at least 100px wide */
}

    https://github.com/ausi/cq-prolyfill

    0 讨论(0)
  • 执念已碎
    2020-11-22 04:42

    A Media Query inside of an iframe can function as an element query. I've successfully implement this. The idea came from a recent post about Responsive Ads by Zurb. No Javascript!

    0 讨论(0)
  • 一向
    2020-11-22 04:43

    No, 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.

    0 讨论(0)
 看不清?
提交回复
热议问题