이 게시물 시리즈의 색인은 NgateSystems.com에 있습니다. 거기에서 매우 유용한 키워드 검색 기능도 찾을 수 있습니다.
최종 검토일: 2024년 11월
게시물 4.2에서는 웹 앱이 웹 검색에 나타나도록 하려면 다음을 확인해야 한다고 밝혔습니다.
귀하의 소프트웨어가 주로 데스크톱 사용자를 대상으로 하는 경우 이는 매우 귀찮은 일이지만 그게 현실입니다. 문제를 체계적으로 해결할 수 있는 방법을 살펴보겠습니다.
반응형 디자인은 CSS 스타일링의 '베이크인' 기능을 사용하여 디스플레이 장치의 너비를 테스트하고 이에 따라 서식을 조정합니다. 이 모든 작업은 브라우저 내에서 자동으로 발생합니다. 하지만 각 "중단점"(새로운 너비별 스타일이 적용되는 화면 너비)에서 어떤 일이 발생하는지에 대한 명시적인 지침을 제공해야 합니다.
지금까지 이 시리즈를 통해 사용해 온 표준 CSS 스타일은 '미디어 쿼리'라는 기술을 사용하여 이러한 적응형 효과를 얻습니다. 하지만 이번 포스팅에서는 Tailwind라는 '오픈 라이브러리'를 소개하겠습니다. 이는 반응형 스타일링을 위해 맞춤 제작되었으며 많은 추가 장점이 있습니다.
다음은 최대 768px 너비의 화면에서 중앙 제목을 화면 너비의 95%로 제한하는 Tailwind 스타일의 예입니다. 이 너비를 초과하면 중앙에 있는 제목이 화면 너비의 60%로 제한됩니다.
<h1>
<p>Previously in this series, you've seen styles applied to HTML elements like <p> by adding>
<p>The essence of Tailwind is that it provides a system of single-purpose "utility classes", each of which applies a specific set of styles to an element. The class names are chosen judiciously to provide a meaningful and practical expression of styling intentions. The example below styles a <p> element with 4rem padding on all four sides and a background color of light gray.<br>
</p>
<pre class="brush:php;toolbar:false"><div>
<p>Here, in bg-blue-500, bg says that this is a background style, blue sets the background colour to blue and 500 sets the colour "intensity" to a mid-value on a scale of 100 (light) to 900 (dark).</p>
<p>This is fine in its way, but the system may only become of interest to you when I tell you that you can make the tailwind utility classes responsive by simply adding a prefix to the style.</p>
<p>Tailwind recognizes the following screen-width "breakpoints":</p>
<div><table>
<thead>
<tr>
<th>Prefix</th>
<th>Screen Size</th>
<th>Minimum Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>sm</td>
<td>Small devices</td>
<td>640px</td>
</tr>
<tr>
<td>md</td>
<td>Medium devices</td>
<td>768px</td>
</tr>
<tr>
<td>lg</td>
<td>Large devices</td>
<td>1024px</td>
</tr>
<tr>
<td>xl</td>
<td>Extra large devices</td>
<td>1280px</td>
</tr>
<tr>
<td>2xl</td>
<td>2x Extra large devices</td>
<td>1536px</td>
</tr>
</tbody>
</table></div>
<p>A style class such as "bg-gray-200" might thus be made to apply only to screens larger than 640px by specifying it as "sm:bg-gray-200".</p>
<p>The "This div has padding on all sides." example above could thus be made to display its paragraph with a blue background on screens with a maximum width of 640px and green on screens larger than this by styling it as follows:<br>
</p>
<pre class="brush:php;toolbar:false"><p>
<p>Because classes to the right take precedence, this makes the default background blue and overrides this with green when the screen is large enough. </p>
<p>For a fuller account of the Tailwind system and instructions on how to istall this in your project please see the Tailwind Website.</p>
<h3>
3. Adaptive design for Server-side rendered webapps
</h3>
<p>Responsive design won't help you achieve more drastic effects where the desktop and mobile versions of a webapp are seriously different. Whereas a <strong>responsive design</strong> adjusts a standard pattern"fluidly" to accommodate different screen sizes, an <strong>adaptive</strong> design is prepared to give screen widths tailor-made solutions. </p>
<p>Expanding on the "tailoring" theme, you might think of responsive design as creating a single suit made of stretchable fabric that fits anyone. By contrast, adaptive design is like creating multiple tailored suits for different body types.</p>
<p>So if, for example, you felt that the mobile customers for your webapp were completely different from your desktop fans, you might want to give each community a tailor-made design (while delivering both under the same URL). </p>
<p>Conceptually, the obvious way to express this arrangement would be a displayIsMobile boolean guiding the display of MobileLayout and DesktopLayout components, as follows:<br>
</p>
<pre class="brush:php;toolbar:false">{#if displayIsMobile}
<MobileLayout />
{:else}
<DesktopLayout />
{/if}
하지만 이제 "이 displayIsMobile 부울을 어떻게 초기화하나요?"라고 묻게 됩니다.
서버가 myURL/myPage에 대한 브라우저 요청을 받으면 일반적으로 가장 먼저 실행되는 것은 초기 데이터를 제공하기 위해 서버 측을 실행하는 page.server.js 파일의 load() 함수입니다. 페이지용. myPage용 page.svelte(서버 측에서도 실행)가 이 데이터를 수신하면 "템플릿" 섹션의 초기 렌더링을 수행하고 HTML 블록을 브라우저로 다시 보내려고 합니다. 하지만 이렇게 하려면 displayIsMobile 값이 필요합니다.
"클라이언트 측"을 실행 중인 경우 대답은 간단합니다. "window" 개체를 사용하여 window.width를 검사하고 그에 따라 displayIsMobile을 설정합니다. 하지만 이 경우 서버 측에서 실행되는 page.server.js나 page.svelte 파일 모두 클라이언트에 직접 질의할 수 없습니다.
displayIsMobile에 대한 적절한 기본값을 선택하고 기본 디스플레이를 반환하는 옵션이 있을 수 있습니다. 그런 다음 클라이언트에서 onMount() 함수를 사용하여 창 속성을 검사하고 기본 디스플레이를 보다 적절하게 다시 렌더링할 수 있습니다. 그러나 두 가지 결과가 따릅니다.
따라서 이 작업을 제대로 수행하려면 서버에서 displayisMobile을 적절하게 설정하는 방법을 찾아야 합니다. 이렇게 하면 완전히 렌더링된 페이지를 가능한 한 빨리 클라이언트에 보내 성능과 SEO를 모두 최적화할 수 있습니다.
Post 3.5를 읽으셨다면 서버 요청에 수반되는 "헤더"가 유용한 정보를 전송하는 데 사용될 수 있다는 점을 기억하실 것입니다. myURL/myPage 페이지에 대한 브라우저 요청의 헤더에 유용한 내용이 있을 수 있습니까?
다행히 대답은 '예, 그렇습니다'입니다. 예를 들어, browser-requests user-agent 헤더에는 요청이 데스크톱 브라우저가 아닌 모바일에서 오는 것임을 알려주는 데 사용할 수 있는 "엔진 및 브라우저" 구성 요소가 포함되어 있습니다. 그러나 사용자 에이전트 요청 헤더는 컴퓨팅의 가장 암울한 과거에 뿌리를 두고 있으며 그 기능은 여러 가지 경쟁 이익의 균형을 맞추는 데 어려움을 겪었습니다.
여기서 가장 큰 문제는 사용자 환경에 대한 너무 정확한 설명(헤더에는 사용자 브라우저, 운영 체제 유형 및 버전 등의 세부 정보도 포함)이 탐색할 때 사용자를 식별하고 추적하는 데 사용될 수 있다는 우려였습니다. 편물. 이 문제는 아직 해결되지 않은 상태입니다.
다음은 "사용자 에이전트" 예입니다.
<h1>
<p>Previously in this series, you've seen styles applied to HTML elements like <p> by adding>
<p>The essence of Tailwind is that it provides a system of single-purpose "utility classes", each of which applies a specific set of styles to an element. The class names are chosen judiciously to provide a meaningful and practical expression of styling intentions. The example below styles a <p> element with 4rem padding on all four sides and a background color of light gray.<br>
</p>
<pre class="brush:php;toolbar:false"><div>
<p>Here, in bg-blue-500, bg says that this is a background style, blue sets the background colour to blue and 500 sets the colour "intensity" to a mid-value on a scale of 100 (light) to 900 (dark).</p>
<p>This is fine in its way, but the system may only become of interest to you when I tell you that you can make the tailwind utility classes responsive by simply adding a prefix to the style.</p>
<p>Tailwind recognizes the following screen-width "breakpoints":</p>
<div><table>
<thead>
<tr>
<th>Prefix</th>
<th>Screen Size</th>
<th>Minimum Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>sm</td>
<td>Small devices</td>
<td>640px</td>
</tr>
<tr>
<td>md</td>
<td>Medium devices</td>
<td>768px</td>
</tr>
<tr>
<td>lg</td>
<td>Large devices</td>
<td>1024px</td>
</tr>
<tr>
<td>xl</td>
<td>Extra large devices</td>
<td>1280px</td>
</tr>
<tr>
<td>2xl</td>
<td>2x Extra large devices</td>
<td>1536px</td>
</tr>
</tbody>
</table></div>
<p>A style class such as "bg-gray-200" might thus be made to apply only to screens larger than 640px by specifying it as "sm:bg-gray-200".</p>
<p>The "This div has padding on all sides." example above could thus be made to display its paragraph with a blue background on screens with a maximum width of 640px and green on screens larger than this by styling it as follows:<br>
</p>
<pre class="brush:php;toolbar:false"><p>
<p>Because classes to the right take precedence, this makes the default background blue and overrides this with green when the screen is large enough. </p>
<p>For a fuller account of the Tailwind system and instructions on how to istall this in your project please see the Tailwind Website.</p>
<h3>
3. Adaptive design for Server-side rendered webapps
</h3>
<p>Responsive design won't help you achieve more drastic effects where the desktop and mobile versions of a webapp are seriously different. Whereas a <strong>responsive design</strong> adjusts a standard pattern"fluidly" to accommodate different screen sizes, an <strong>adaptive</strong> design is prepared to give screen widths tailor-made solutions. </p>
<p>Expanding on the "tailoring" theme, you might think of responsive design as creating a single suit made of stretchable fabric that fits anyone. By contrast, adaptive design is like creating multiple tailored suits for different body types.</p>
<p>So if, for example, you felt that the mobile customers for your webapp were completely different from your desktop fans, you might want to give each community a tailor-made design (while delivering both under the same URL). </p>
<p>Conceptually, the obvious way to express this arrangement would be a displayIsMobile boolean guiding the display of MobileLayout and DesktopLayout components, as follows:<br>
</p>
<pre class="brush:php;toolbar:false">{#if displayIsMobile}
<MobileLayout />
{:else}
<DesktopLayout />
{/if}
이 엉망진창을 구문 분석하면 발생할 수 있는 문제를 쉽게 알 수 있다고 생각합니다!
하지만 다른 옵션도 있습니다. Google의 최근 계획에서는 브라우저가 sec-chu-ua-mobile이라는 새롭고 훨씬 간단한 헤더를 제공해야 한다고 제안했습니다. 여기에는 브라우저가 모바일 응답을 기대하는지 여부를 알려주는 간단한 문자열이 포함되어 있습니다(자세한 내용은 Sec-CH-UA-Mobile 참조).
그러나 sec-chu-ua-mobile 헤더는 이제 Chrome 및 Edge에서 사용할 수 있지만 다른 브라우저는 반드시 이 이니셔티브를 지원하지는 않습니다. 어떤 경우든 sec-chu-ua-mobile 헤더는 응답을 구체화하고 명시적인 "태블릿" 버전을 제공할 만큼 충분한 세부 정보를 제공하지 않습니다.
이 모든 것이 매우 지루하지만 첫 번째 호출 포트로 sec-chu-ua-mobile을 사용하고 대체 수단으로 사용자 에이전트를 사용하는 것이 만족스럽다는 결론을 내리기에 충분할 수 있습니다. 이 경우 page.svelte 파일에 displayIsMobile 변수를 제공하는 코드가 있습니다.
혼란스럽게도 Hooks.server.js 파일이라는 새로운 유형의 Svelte 파일로 시작됩니다.
load() 함수에 page.svelte 파일에 대한 displayIsMobile을 설정하는 코드를 넣을 수도 있지만 모든 page.svelte 페이지에 이러한 항목이 있는 것은 아닙니다. 그리고 그렇게 한다고 해도(물론 언제든지 만들 수 있음) 모든 load() 함수에서 displayIsMobile 코드를 복제해야 한다는 것을 알게 될 것입니다.
반대로, Hooks.server.js 파일은 Svelte가 서버에 제출된 모든 요청에 대해 시작하는 일종의 "슈퍼" load() 함수입니다. 다른 활동이 실행되기 전에 실행됩니다. 이는 sec-chu-ua-mobile 헤더를 검사하고 displayIsMobile에 대한 값을 생성하기에 완벽한 장소입니다.
아래 코드는 Hooks.server.js 파일로 displayIsMobile을 구성하는 방법을 보여줍니다. 또한 이 값이 예상 page.svelte 파일로 다시 전달될 수 있는 방법도 보여줍니다.
<h1>
<p>Previously in this series, you've seen styles applied to HTML elements like <p> by adding>
<p>The essence of Tailwind is that it provides a system of single-purpose "utility classes", each of which applies a specific set of styles to an element. The class names are chosen judiciously to provide a meaningful and practical expression of styling intentions. The example below styles a <p> element with 4rem padding on all four sides and a background color of light gray.<br>
</p>
<pre class="brush:php;toolbar:false"><div>
<p>Here, in bg-blue-500, bg says that this is a background style, blue sets the background colour to blue and 500 sets the colour "intensity" to a mid-value on a scale of 100 (light) to 900 (dark).</p>
<p>This is fine in its way, but the system may only become of interest to you when I tell you that you can make the tailwind utility classes responsive by simply adding a prefix to the style.</p>
<p>Tailwind recognizes the following screen-width "breakpoints":</p>
<div><table>
<thead>
<tr>
<th>Prefix</th>
<th>Screen Size</th>
<th>Minimum Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>sm</td>
<td>Small devices</td>
<td>640px</td>
</tr>
<tr>
<td>md</td>
<td>Medium devices</td>
<td>768px</td>
</tr>
<tr>
<td>lg</td>
<td>Large devices</td>
<td>1024px</td>
</tr>
<tr>
<td>xl</td>
<td>Extra large devices</td>
<td>1280px</td>
</tr>
<tr>
<td>2xl</td>
<td>2x Extra large devices</td>
<td>1536px</td>
</tr>
</tbody>
</table></div>
<p>A style class such as "bg-gray-200" might thus be made to apply only to screens larger than 640px by specifying it as "sm:bg-gray-200".</p>
<p>The "This div has padding on all sides." example above could thus be made to display its paragraph with a blue background on screens with a maximum width of 640px and green on screens larger than this by styling it as follows:<br>
</p>
<pre class="brush:php;toolbar:false"><p>
<p>Because classes to the right take precedence, this makes the default background blue and overrides this with green when the screen is large enough. </p>
<p>For a fuller account of the Tailwind system and instructions on how to istall this in your project please see the Tailwind Website.</p>
<h3>
3. Adaptive design for Server-side rendered webapps
</h3>
<p>Responsive design won't help you achieve more drastic effects where the desktop and mobile versions of a webapp are seriously different. Whereas a <strong>responsive design</strong> adjusts a standard pattern"fluidly" to accommodate different screen sizes, an <strong>adaptive</strong> design is prepared to give screen widths tailor-made solutions. </p>
<p>Expanding on the "tailoring" theme, you might think of responsive design as creating a single suit made of stretchable fabric that fits anyone. By contrast, adaptive design is like creating multiple tailored suits for different body types.</p>
<p>So if, for example, you felt that the mobile customers for your webapp were completely different from your desktop fans, you might want to give each community a tailor-made design (while delivering both under the same URL). </p>
<p>Conceptually, the obvious way to express this arrangement would be a displayIsMobile boolean guiding the display of MobileLayout and DesktopLayout components, as follows:<br>
</p>
<pre class="brush:php;toolbar:false">{#if displayIsMobile}
<MobileLayout />
{:else}
<DesktopLayout />
{/if}
이제 displayIsMobile은 브라우저 요청에 대한 이벤트 개체에 있습니다. 이 이벤트는 현재 요청을 나타내기 위해 SvelteKit에서 생성한 복잡한 개체입니다. 다음과 같은 속성이 포함되어 있습니다.
상상하시겠지만 이제 이벤트는 필요할 수 있는 모든 곳에서 사용할 수 있으므로 event.locals는 displayIsMobile에 홈을 제공하는 데 꼭 필요한 것입니다.
handle()에 대한 {event, response} 인수 형식이 당황스러울 수 있습니다. 이것은 "구조화 해제" 구문의 예입니다. 이를 통해 개체 자체를 참조하지 않고 개체에서 특정 속성을 직접 추출할 수 있습니다. 이벤트와 응답을 속성으로 포함하는 슈퍼 객체 인수가 있다고 상상해 보세요. 그렇다면 기존의 방법을 사용하는 대신
User-Agent: Mozilla/4.9 Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
"구조 분해 구문"을 사용하면 다음과 같이 작성할 수 있습니다.
// src/hooks.server.js
export async function handle({ event, resolve }) {
let displayIsMobile;
console.log("event.request.headers['sec-ch-ua-mobile']: ", event.request.headers.get('sec-ch-ua-mobile'));
// First, try to get the mobile flag from the 'sec-ch-ua-mobile' header. This is a string header
// and its value is '?1' if the user agent is a mobile device, otherwise it is '?0'.
if (event.request.headers.get('sec-ch-ua-mobile') !== undefined) {
displayIsMobile = event.request.headers.get('sec-ch-ua-mobile') === '?1' ? true : false;
} else {
// Otherwise, try the 'user-agent' header. For robust mobile detection, you might consider using
// the ua-parser-js library. It provides consistent results across various edge cases.
if (event.request.headers.get('user-agent') !== undefined) {
displayIsMobile = event.request.headers.get('user-agent').toLowerCase().includes('mobile');
} else {
displayIsMobile = false
}
}
// Put displayIsMobile into event.locals. This is an object provided by SvelteKit that is specific to a
// particular browser request and which is acessible in every page and layout. In brief, event.locals lets
// you pass data throughout the lifecycle of a request in SvelteKit. It provides a convenient way to share
// computed values or state without needing to repeat logic or fetch data multiple times.
event.locals.displayIsMobile = displayIsMobile;
// Proceed with the request. In SvelteKit, resolve(event) is crucial for handling the request lifecycle.
// It processes the current request and generates the final response that will be sent back to the client.
const response = await resolve(event);
return response;
}
기본적으로 이는 상위 개체의 이름(args)을 알지 못한 채 args 개체의 속성(args.event 등)을 참조하는 방법입니다. 이로 인해 더욱 견고하고 탄력적인 코드가 탄생합니다.
어쨌든, 이제 displayIsMobile이 브라우저 요청에 대한 이벤트 객체에 있으므로 해야 할 일은 page.server.js 파일에서 load() 함수를 사용하여 이를 파헤쳐 반환하는 것입니다. page.svelte에 넣으세요.
function handle(args) {
const event = args.event;
const resolve = args.resolve;
// ... (code referencing variables "event" and "resolve")
}
마지막으로 적응형 페이지를 제공하는 매우 간단한 page.svelte 파일이 있습니다
function handle({ event, resolve }) {
// ...(code referencing variables "event" and "resolve")
}
즐거웠기를 바랍니다!
요약하면 전체 순서는 다음과 같습니다.
페이지가 수화되면 반응성은 순전히 클라이언트 측 문제입니다. 코드의 템플릿 섹션에 있는 SvelteKit {#if popupIsVisible은 popupIsVisible을 기반으로 DOM 요소를 전환하는 컴파일된 함수가 됩니다.
위 내용은 NgSysV.반응형/적응형 디자인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
