Why is border radius changing when zooming?-CodePudding

This might very well be the stupidest question but why is the border radius of items changing when you zoom the viewport by Ctrl mousewheel or through browser zoom? (To test it, run the code snippet below and open it in full page, then zoom in and out) The border radius is set in pixels, so why is it changing? Also, I always have to use flex layout to center text vertically inside a container, is there a better way to vertically a text? Setting display: inline-block and vertical-align: middle is not working.

/* Normalize rules */

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

body {
  min-height: 100vh;
}


/* Root grid layout */

.root {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(6, minmax(20px, 1fr));
  grid-template-rows: repeat(6, minmax(20px, 1fr));
  gap: 15px;
  padding: 15px;
}

section.merchandise {
  background-color: #aa0100;
  grid-column: 1/3;
  grid-row: 1;
}

header {
  background-color: #000;
  grid-column: 3/7;
  grid-row: 1;
}

aside {
  background-color: #00aa01;
  grid-column: 1;
  grid-row: 2/7;
}

section.products {
  background-color: #0300aa;
  grid-column: 2/6;
  grid-row: 2/4;
}

footer {
  grid-column: 2/7;
  grid-row: 6;
  background-color: #ffa502;
}


/* Features sub-grid */

.features {
  grid-column: 6;
  grid-row: 2/6;
  display: grid;
  gap: 15px;
  grid-template-columns: minmax(20px, 1fr);
  grid-template-rows: repeat(4, minmax(20px, 1fr));
}

.features>div:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.features>div:nth-child(2) {
  grid-column: 1;
  grid-row: 3;
}


/* Bonuses sub-grid */

.bonuses {
  grid-column: 2/6;
  grid-row: 4/6;
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, minmax(20px, 1fr));
  grid-template-rows: repeat(2, minmax(20px, fr));
}

.bonuses>div:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.bonuses>div:nth-child(2) {
  grid-column: 2;
  grid-row: 2;
}

.bonuses>div:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}

.bonuses>div:nth-child(4) {
  grid-column: 4;
  grid-row: 2;
}


/* Visual styles */

h2,
h3 {
  font-size: 1.2rem;
  color: #fff;
}

div,
header,
footer,
aside,
section {
  border-radius: 12px;
}

.feature-item {
  background-color: #dd0101;
}

.bonus-item {
  background-color: #ffc0cb;
}

.bonus-item>h3 {
  color: #000;
}

.centered-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered-text>h2,
.centered-text>h3 {
  text-align: center;
}

<div >
  <section >
    <h2>Featured Merchandising</h2>
  </section>
  <header >
    <h2>Header</h2>
  </header>
  <aside >
    <h2>Sidebar</h2>
  </aside>
  <section >
    <h2>Products</h2>
  </section>
  <div >
    <div >
      <h3>Bonus1</h3>
    </div>
    <div >
      <h3>Bonus2</h3>
    </div>
    <div >
      <h3>Bonus3</h3>
    </div>
    <div >
      <h3>Bonus4</h3>
    </div>
  </div>
  <div >
    <div >
      <h3>Feature1</h3>
    </div>
    <div >
      <h3>Feature2</h3>
    </div>
  </div>
  <footer >
    <h2>Footer</h2>
  </footer>
</div>

CodePudding user response：

I think, you want only the text to be zoomed and the border radius to look the same. Therefor you could use a screen dependent value like vw or vh. For example:

div,
header,
footer,
aside,
section {
  border-radius: calc(1vw   1vh);
}

Working example:

/* Normalize rules */

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

body {
  min-height: 100vh;
}


/* Root grid layout */

.root {
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(6, minmax(20px, 1fr));
  grid-template-rows: repeat(6, minmax(20px, 1fr));
  gap: 15px;
  padding: 15px;
}

section.merchandise {
  background-color: #aa0100;
  grid-column: 1/3;
  grid-row: 1;
}

header {
  background-color: #000;
  grid-column: 3/7;
  grid-row: 1;
}

aside {
  background-color: #00aa01;
  grid-column: 1;
  grid-row: 2/7;
}

section.products {
  background-color: #0300aa;
  grid-column: 2/6;
  grid-row: 2/4;
}

footer {
  grid-column: 2/7;
  grid-row: 6;
  background-color: #ffa502;
}


/* Features sub-grid */

.features {
  grid-column: 6;
  grid-row: 2/6;
  display: grid;
  gap: 15px;
  grid-template-columns: minmax(20px, 1fr);
  grid-template-rows: repeat(4, minmax(20px, 1fr));
}

.features>div:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.features>div:nth-child(2) {
  grid-column: 1;
  grid-row: 3;
}


/* Bonuses sub-grid */

.bonuses {
  grid-column: 2/6;
  grid-row: 4/6;
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(4, minmax(20px, 1fr));
  grid-template-rows: repeat(2, minmax(20px, fr));
}

.bonuses>div:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.bonuses>div:nth-child(2) {
  grid-column: 2;
  grid-row: 2;
}

.bonuses>div:nth-child(3) {
  grid-column: 3;
  grid-row: 1;
}

.bonuses>div:nth-child(4) {
  grid-column: 4;
  grid-row: 2;
}


/* Visual styles */

h2,
h3 {
  font-size: 1.2rem;
  color: #fff;
}

div,
header,
footer,
aside,
section {
  border-radius: calc(1vw   1vh);
}

.feature-item {
  background-color: #dd0101;
}

.bonus-item {
  background-color: #ffc0cb;
}

.bonus-item>h3 {
  color: #000;
}

.centered-text {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centered-text>h2,
.centered-text>h3 {
  text-align: center;
}

<div >
  <section >
    <h2>Featured Merchandising</h2>
  </section>
  <header >
    <h2>Header</h2>
  </header>
  <aside >
    <h2>Sidebar</h2>
  </aside>
  <section >
    <h2>Products</h2>
  </section>
  <div >
    <div >
      <h3>Bonus1</h3>
    </div>
    <div >
      <h3>Bonus2</h3>
    </div>
    <div >
      <h3>Bonus3</h3>
    </div>
    <div >
      <h3>Bonus4</h3>
    </div>
  </div>
  <div >
    <div >
      <h3>Feature1</h3>
    </div>
    <div >
      <h3>Feature2</h3>
    </div>
  </div>
  <footer >
    <h2>Footer</h2>
  </footer>
</div>

CodePudding user response：

For vertical align, you can set text inside div/span and then use transform: translateY(calc(size_of_container - 50%)). Does this approach suit you?