JS로 응답성을 구현하는 간단한 코드
- PHPz원래의
- 2017-04-03 15:33:382259검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.