Photoshop Question posted in
The official user guide can be found here.

@media screen units are not pixels, so what are they? – Photoshop

This is what I want

If browser is bigger than 900px I want the boxes to be 700px.
Once the browser width is smaller than 900px I want the boxes to be 600px.

@media screen and (min-width : 750px) and (max-width : 900px) {
    .multiSelect .checkboxLayer {
        width: 600px;
    }
}
@media screen and (min-width: 900px) {
    .multiSelect .checkboxLayer {
        width: 700px;
    }
}

My question is, how come the browser width splits around 932px and not 900px?
What units are these if not pixels?

enter image description here

I just tried to measure the browser width with photoshop and it splits at 975 px exactly.

So CSS says 900 px, Chrome says 932 px and photoshop says 975 px
This is really confusing?!?!

Tags:

2

Answers


  1. 0

    Scroll bar width is 17px on most browsers, and does not contribute to the screen width. Try using Firefox’s responsive design mode, in the dev tools.

    Login or Signup to reply.
  2. 0

    The short answer:

    You have not reset the box-sizing property for the parent container.

    The long answer:

    Consider this:

    In CSS, by default, the width and height you assign to an element is applied only to the element’s content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that’s rendered on the screen.

    There are two values in box-sizing that you should know about

    1. content-box

      […] the default, and gives you the default CSS box-sizing behavior. If you
      set an element’s width to 100 pixels, then the element’s content box
      will be 100 pixels wide, and the width of any border or padding will
      be added to the final rendered width.

    2. border-box

      […] tells the browser to account for any border and padding in the
      value you specify for width and height. If you set an element’s width
      to 100 pixels, that 100 pixels will include any border or padding you
      added, and the content box will shrink to absorb that extra width.
      This typically makes it much easier to size elements.

    I usually start any CSS sheet with the following to avoid such issues 

    * {
  box-sizing: border-box;
  padding: 0;
  margin: 0
}

    There are many frameworks that reset more of the default properties such as normalize.css but I often don’t have the need to use them.

    I set up a demo below. There are two div elements. There is also a media query.

    Both elements have the same fixed width in px. The only difference is the value for the box-sizing

    The first is set to border-box and the second is set to content-box

    div {
  width: 400px;
  height: 400px;
  margin: 3em;
  text-align: center;
  background: darkred;
  border: 20px solid #131418
}

@media (max-width: 800px) {
  div {
    background: darkgreen;
    width: 300px;
  }
}

.first {
  box-sizing: border-box
}

.second {
  box-sizing: content-box
}
    <div class="first"></div>
<div class="second"></div>

    Notice how they render with different sizes even when the width for both is the same?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search