일반적인 상황에서는 네이티브 코드보다 부트스트랩을 사용하여 반응형 레이아웃을 작성하는 것이 더 빠릅니다
이전 기사 "부트스트랩의 실제 적용"에 대한 보충:
bootstrap的lang ：<html lang="zh-CN"> 之前班上很多同学忘了改这个 原生的lang为 <html lang="en"><br>由于bootstrap本质是已经写好了固定的css的样式 所以要修改从bootstrap复制过来的内容时 请在 例如：
<button type="button" class="btn btn-default" style="height: 1.875rem;border: none;">微信登录</button> 里修改 也就是 内联<br>才会起作用 如果你自己本身用的外联link XXXX 的css样式想去修改bootstrap复制过来的某个东西时 起不了作用
웹쪽에서는 다양한 브라우저에 적응하기 위해 호환성이 필요합니다. 여러 세트의 사진이 있을 수 있으며,
앱의 화면 크기가 다르므로 조정해야 합니다. {@media srceen 또는 bootstrap 또는 JS} 스프라이트 이미지도 자주 사용됩니다
* 스프라이트 사진은 웹페이지 로딩 속도를 향상시키고 여러 사진을 하나로 통합할 수 있습니다.
* 적응형의 경우 너비도 백분율이어야 하며, 부득이한 경우에는 rem 마진과 패딩을 사용하는 것이 좋습니다. 두 번째로 rem
* 모바일 단말기는 메타 뷰포트를 추가해야 합니다
사용자는 확대/축소할 수 없습니다.
휴대폰의 다양한 화면 크기에 따른 글꼴 크기 변환
@media 화면 및 (최소 너비: 1242px){html{font-size: 38.8125px;}}
@media 화면 및 (최소 너비: 960px){html{font-size: 30px;}}
@media 화면 및 (최대 너비: 750px){html{font-size: 23.4375px;}}
@media 화면 및 (최대 너비: 640px){html{font-size :20px;}}
@media 화면 및 (최대 너비: 414px){html{font-size:12.9375px;}}
@media 화면 및 (최대 너비: 360px){html{font- size:11.25px;}}
@media 화면 및 (최대 너비: 320px){html{font-size:10px;}}
이미지 사용 시 img를 div로 감싸고 img를 본문에 직접 노출하지 마세요
우아한 다운그레이드
호환성이 좋은 브라우저에서 웹페이지 만들기를 시작하고 호환성이 좋지 않은 브라우저에 천천히 적응하세요
점진적으로 강화
처음에는 모든 브라우저와 화면 적응이 이루어지지만 기본적인 기능만 완성되고 점차 내용이 채워져 갑니다
부트스트랩의 컨테이너 너비는 100%로 고정되어 있습니다
내비게이션과 테일에 위치 고정 속성이 적용된 경우 중간 콘텐츠 위치 지정 시 위치 지정을 사용하지 않고 여백이나 패딩을 사용하여 거리를 지원합니다. 그렇지 않으면 위치가 지정된 요소가 고정 네비게이션 및 블록 위에 나타납니다. 절대 및 상대 결과를 사용할 수 없으며 직접 테스트할 수 있습니다.....
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
