JS로 응답성을 구현하는 간단한 코드-JS 튜토리얼-php.cn

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

PHPz

풀어 주다： 2017-04-03 15:33:38

원래의

2208명이 탐색했습니다.

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