배경

서버가 없는 상황에서 자신이 사용하는 가계수지부식을 동시에 배우는 웹 서비스가 개발 중이다이전 게시물 편집 대화상자의 개발이 끝났습니다.하지만 문제가 드러났다.

문제

자신의 컴퓨터에서 개발할 때는 아무런 문제가 없었다.

하지만 배치 후 자신의 휴대전화로 보다가 문제가 발견됐다.설계야, 붕괴.

데이터의 편집 자체는 가능하다.그러나 자신만 사용하는 조건을 합쳐도 이런 붕괴는 용납하기 어렵다.요점은 두 가지입니다.

단추를 두 열로 배열합니다

날짜 입력 너비 변경

대책 시작

매일 입력, 업데이트는 이동으로 예정되어 있습니다

이동에 맞추면 PC 측면이 외롭기 때문에 장치에 따라 구분하고 싶습니다

PC용과 모바일용으로 다른 페이지를 만드는 것이 이상적이다

조작성은 PC용과 이동용이 분리된 화면이 아니다

이를 고려해 응답 네트워크 디자인, 미디어 조회 등 기술을 알게 됐다.장치의 종류, 화면 너비에 따라 css 등을 전환할 수 있습니다.

변경점 찾기

화면 크기에 따라 전환해도 어셈블리에 지정된 값이 수정되므로 덮어쓰기 지점을 찾습니다.Chrome은 F12의 개발자 모델입니다.
개발자 모드 영역의 왼쪽 상단에 있는 단추로 디스플레이 모드를 이동합니다.화면 상단에 치수를 지정합니다.이동 단추 옆에 있는 요소 지정 모드를 선택한 후 대화상자의 DOM 요소를 찾아 오른쪽 구역에서 디자인 css를 확인합니다.

index.css에서el-dialog류가width:50%로 지정되었기 때문입니다.
마찬가지로 지정된 날짜에 어셈블리 너비를 입력한 어셈블리를 찾습니다.
index.css에서el-date-editor.el-input, .el-date-editor.el-input__inner,width:220px;의 규격화 거리의 멱 함수.
이동할 경우 대화 폭은 280px 정도이고 이 상태에서 날짜를 160px 정도로 입력하는 것이 좋습니다.화면 사이즈 640px 이하로 전환하고 싶습니다.

실시

나는 스타일scoped 라벨에 쓰면 갈 수 있다고 생각했지만, 다른 구성 요소를 직접 지정할 수 없을 것 같았다.컴파일 대상에서 벗어날 수 있습니다.그리고 el-dialog는 DOM이 template와 실제에서 변화하는 모습을 구성한다.그럼에도 불구하고 전 세계의 css로 지정하는 것을 피하고 싶습니다.조사를 많이 해봤는데 조합기를 사용하는 게 좋을 것 같아요.끼워 넣는 대화상자도 없으니까 괜찮은 것 같아요.
대화상자 템플릿의 가장 바깥쪽 탭에class 속성을 추가합니다.

<template>
  <el-dialog title="入力" :visible.sync="slipDialogVisible" class="slipinputdlg">
  <!-- 中略 -->
  </el-dialog>
</template>

이 반의 부하 형식으로 지정합니다.<탭 아래에서 다음 내용을 지정합니다.

@media (max-width:640px) {
  .slipinputdlg >>> .el-dialog {
    width: 280px;
  }
  .slipinputdlg >>> .el-date-editor.el-input, .el-date-editor.el-input__inner {
    width: 160px;
  }
}

참조 페이지
가상 구성 요소 스타일을 덮어쓰려면
역할 도메인이 있는 CSS

결과

고쳤어!이 대화상자의el-dialog 클래스만 너비를 지정합니다.

감상

이 대화상자에 국한되지 않지만 조금 복잡한 일을 하려면 자바스크립트, html, css 등 웹 페이지의 기본 지식이 필요합니다

Element.ii는 움직이는 화면 폭을 고려하지 않은 것 같습니다.말은 그렇지만 진지하게 생각하지 않아도 오히려 혼란스러워진다