단 하나의 설치 라인으로 반응형 웹을 만들어 볼까요? 기여자를 찾고 있어요!
- Barbara Streisand원래의
- 2024-11-06 09:04:02410검색
최근 저는 제목에 설명된 사명을 담은 NPM 패키지를 게시했습니다: 단 한 줄의 코드로 반응형 프로젝트 만들기!
반응형 앱 [베타] 패키지를 공유합니다
이 기술을 실험하고 개발하는 데 몇 년이 걸렸으며 현재 다음으로 구성되어 있습니다.
- (1) 화면 해상도 및 (2) 브라우저 글꼴 크기(웹 접근성용)를 고려하여 HTML 태그 글꼴 크기를 동적으로 설정(JS 스크립트를 통해)
- 픽셀 정의를 rem으로 전처리
- 모바일 화면의 요소를 중앙 집중화(실험적 기능)
결과적으로 모든 화면 해상도에서 모든 요소 비율과 상대적 크기가 동일합니다.
예를 들어 Rollup을 사용하여 한 줄만 설치하는 경우:
import responsive from 'rollup-plugin-responsive-app'
export default {
…
plugins: [
…,
// Last plugin on the list
responsive()
],
};
또는 브라우저 번들 버전을 페이지에 배치하는 방법:
<head>
<script src="https://cdn.jsdelivr.net/npm/responsive-app@1.0.7-beta.0/dist/browser-bundle.min.js"></script>
</head>
여기서 주요 목표는 반응성을 전혀 처리하지 않고 인터페이스가 모든 화면 해상도에서 잘 보일 것이라고 신뢰하여 새 프로젝트를 만들 때 시간을 절약하는 것입니다. 정말 멋지죠?
그래서 이번 베타 버전을 출시한 후 지원자와 기여자를 찾고 있습니다. 처음에는 프로세스를 최대한 포괄적으로 만들기 위해 다양한 컨텍스트, 프로젝트 및 프레임워크(React, Angular, Vue…)에서 이 패키지를 테스트하는 것이 아이디어입니다.
이번 도전에 응할 사람은 누구인가요? 테스트 단계는 다음과 같습니다.
- 새 앱이나 기존 앱에 스크립트 태그를 설치하거나 추가하세요. 1.1 기존 대응 규칙이 있는 경우 이를 우회하세요
- 여러 해상도에서 인터페이스를 확인하세요
- 어떻게 효과가 있었는지 알려주세요 :)
위 내용은 단 하나의 설치 라인으로 반응형 웹을 만들어 볼까요? 기여자를 찾고 있어요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.