브라우저 크기를 조정하지 않고 UI를 테스트하는 방법

문제

UI 레이아웃에서 작업할 때 응답성을 테스트하기 위해 다음 중 하나를 사용할 수 있습니다.

사용자 지정 표시 영역 크기가 있는 DevTools

또는 일부 확장자 예: 창 크기 조정기

또는 브라우저 창 자체의 크기를 조정합니다

.

위 접근 방식의 문제점은 고정된 창 크기로 테스트한다는 것입니다.

해결책

css 속성 입력resize
이 속성은 4가지 다른 값을 허용합니다.

모두 - 수평 및 수직으로 크기 조정

수평 - 수평 방향으로 크기 조정

세로 - *세로 방향으로 크기 조정

none - 사용자가 크기를 조정할 수 있는 방법이 없습니다.

The rules to use resize:

1. NO inline elements
2. overflow is NOT visible

플렉스 컨테이너에 래핑된 항목이 있는 코드가 있다고 가정해 보겠습니다.

  <ul class="items">
    <li> item </li>
    <li> lorem ipsum dorem </li>
    <li> Lorem ipsum dolor sit amet </li>
    <li> consectetur adipiscing elit, sed do eiusmod tempor incididun </li>
  </ul>

.items {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
}

li {
  border: 1px solid;
  padding: 10px;
}

resize 를 사용하려면 다음과 같이 스타일로 ul 를 래핑합니다.

.container {
  display: block;
  overflow: auto;
  resize: both;
}

<div class="container">
  <li> item </li>
    <li> lorem ipsum dorem </li>
    <li> Lorem ipsum dolor sit amet </li>
    <li> consectetur adipiscing elit, sed do eiusmod tempor incididun </li>
</ul>

이를 통해 응답성을 쉽게 테스트할 수 있습니다.



데모용 Codepen 사용 가능here

...

나를 팔로우하거나 Github .