단 하나의 설치 라인으로 반응형 웹을 만들어 볼까요? 기여자를 찾고 있어요!-CSS 튜토리얼-php.cn

단 하나의 설치 라인으로 반응형 웹을 만들어 볼까요? 기여자를 찾고 있어요!

Barbara Streisand

풀어 주다： 2024-11-06 09:04:02

원래의

512명이 탐색했습니다.

최근 저는 제목에 설명된 사명을 담은 NPM 패키지를 게시했습니다: 단 한 줄의 코드로 반응형 프로젝트 만들기!

반응형 앱 [베타] 패키지를 공유합니다

이 기술을 실험하고 개발하는 데 몇 년이 걸렸으며 현재 다음으로 구성되어 있습니다.

(1) 화면 해상도 및 (2) 브라우저 글꼴 크기(웹 접근성용)를 고려하여 HTML 태그 글꼴 크기를 동적으로 설정(JS 스크립트를 통해)
픽셀 정의를 rem으로 전처리
모바일 화면의 요소를 중앙 집중화(실험적 기능)

결과적으로 모든 화면 해상도에서 모든 요소 비율과 상대적 크기가 동일합니다.

Let’s make the web responsive with just one installation line? I’m looking for contributors!

예를 들어 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!