지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > JS로 응답성을 구현하는 간단한 코드

JS로 응답성을 구현하는 간단한 코드

PHPz
풀어 주다： 2017-04-03 15:33:38
원래의
2284명이 탐색했습니다.

1. 반응성을 구현하는 CSS

CSS반응성을 구현하는 것은 주로 CSS미디어 쿼리:

미디어 쿼리는 선택적 미디어 유형과 미디어 속성을 사용하여 스타일 시트의 범위를 제한하는 0개 이상의 표현식으로 구성됩니다. ,예를 들어 : 너비, 높이, 색상. CSS3의 미디어 쿼리를 사용하면 콘텐츠 자체를 변경할 필요 없이 특정 범위의 출력 장치에 대해서만 콘텐츠를 렌더링할 수 있습니다. 즉, 미디어 쿼리를 통해 화면 너비를 결정하고 다양한 CSS스타일 시트

를 로드합니다. 코드는 다음과 같습니다. 기본값이 있어야 한다는 점에 유의하세요. 미디어 쿼리가 없는 스타일 시트. 그렇지 않으면 IE8에서 액세스할 때 스타일 시트가 없습니다. 

<head>

　　<meta charset="UTF-8">

　　<title>响应式的演示</title>

　　<link rel="stylesheet" type="text/css" href="css/reset.css" />

　　<link rel="stylesheet" type="text/css" href="css/index1200.css" />

　　<link rel="stylesheet" type="text/css" href="css/index980.css" media="screen and (min-width:980px) and (max-width:1200px)"/>

　　<link rel="stylesheet" type="text/css" href="css/index640.css" media="screen and (min-width:640px) and (max-width:980px)"/>

　　<link rel="stylesheet" type="text/css" href="css/index320.css" media="screen and (max-width:640px)"/>

</head
로그인 후 복사

2. JS는 응답성을 구현합니다.

JS응답성 구현도 다음에 의존합니다. 다양한 CSS 스타일 시트에 대한 외부 링크를 사용하고, 다양한 장치의 화면 너비를 가져와서 다양한 CSS 스타일 시트를 선택적으로 로드합니다.

아아아아

위 내용은 JS로 응답성을 구현하는 간단한 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
JS，响应式
원천：php.cn
이전 기사：모바일 단말 - 반응형, rem/em, Js를 사용하여 모바일 단말 적응을 동적으로 구현 다음 기사：js를 사용하여 반응형 사이드바 예제 작성
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
쿼리와 수식은 새 열로 전체 테이블을 형성합니다. 여기서 새 열은 다른 조건부 열 값을 포함하는 수식입니다. 편집: 수식은 "값" 열(카테고리를 기준으로 user_id가 가장 낮은 "값" 열)이어야 합니다. 따라서 카테고리 "...
에서 2024-04-06 21:23:40
0
2
530
Javafx에서 인라인 CSS 스타일을 동적으로 수정합니다. 응용프로그램이 최대화되었을 때 창의 배경 이미지를 변경하려고 합니다. 내 배경은 인라인 CSS를 사용하여 설정됩니다. 스타일에 대해 두 개의 다른 변수와 if 문...
에서 2024-04-06 20:57:16
0
1
487
MySQL: "<여기 변수 또는 하위 쿼리>로...에서 텍스트 선택" 다음 데이터가 포함된 다음 테이블이 있습니다. id 텍스트 언어 1 독일어 텍스트 독일어 2 영어 텍스트 영어 내가 원하는 것은 다음 형식의 결과를 얻는 것입니다...
에서 2024-04-06 19:25:54
0
2
529
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
사이트에 CSS 스타일이 적용되지 않음 Bootstrap5를 사용하여 웹사이트를 만들고 있는데 index.css 속성이 index.html에 적용되지 않습니다. 서비스 카드 위로 마우스를 가져가면 배경...
에서 2024-04-06 17:12:23
0
1
336
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿