CSS의 간단한 반응형 구현

1. 웹 페이지 너비 자동 조정 허용

먼저 웹 페이지 코드 헤드에 뷰포트 메타 태그 줄을 추가합니다.

<meta name=”viewport” content=”width=device-width, initial-scale=1″ />

viewport는 웹 페이지의 기본 너비와 높이입니다. 위 코드 줄은 웹 페이지의 너비가 기본적으로 화면 너비(너비=장치 너비)와 동일하고 원래 크기 조정 비율( initial-scale=1)은 1.0으로 웹페이지 초기화 크기는 화면 영역의 100%를 차지합니다.

IE9를 포함한 모든 주요 브라우저는 이 설정을 지원합니다. 이전 브라우저(주로 IE6, 7, 8)의 경우 css3-mediaqueries.js를 사용해야 합니다.

<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>

2. CSS3 미디어 쿼리 사용 @media query

미디어 쿼리를 표현하는 방법에는 세 가지가 있습니다.

1. CSS 파일에서 직접 사용

@media 유형 및 (조건 1) 및 (조건 2 )<code>{css 스타일}@media 类型 and (条件1) and (条件二){css样式}

例：

@media screen and (max-width:980px ) {
 body{
 background-color: red;
 }
}

2.使用@import导入

@import url("css/moxie.css") all and (max-width:980px);

3.也是最常用的：使用link连接，media属性用于设置查询方式：

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

三、其他的一些注意点

1.不使用绝对宽度

由于网页会根据屏幕宽度调整布局，所以不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。这一条非常重要。具体说，CSS代码不能指定像素宽度：width:xxx px;只能指定百分比宽度：width: xx%;或者width:auto;

2.使用相对大小的字体rem而不是px

예:

.main {float: right;width: 70%;}
.leftBar {float: left;width: 25%;}

2. @import를 사용하여

img { max-width: 100%;}

3을 가져옵니다. 연결, 미디어 속성 쿼리 방법을 설정하는 데 사용됩니다:

img, object { max-width: 100%;}

3. 기타 주의 사항

1. 절대 너비를 사용하지 마세요

웹 페이지는 화면 너비에 따라 레이아웃을 조정하므로 사용할 수 없습니다. 절대 너비 레이아웃을 사용하거나 절대 너비 요소가 있는 레이아웃을 사용할 수 없습니다. 이것은 매우 중요합니다. 특히 CSS 코드는 픽셀 너비를 지정할 수 없습니다: width: xxx%; 또는 width: auto

2. 대신 px

CSS의 일반적인 글꼴 단위는 px, em, rem 및 %

3입니다. 유동 격자(fluid Grid)

"유동 레이아웃"의 의미는 각 블록의 위치입니다. 고정되지 않고 부동 상태입니다.

img { width: 100%; }

float의 장점은 너비가 너무 작아 두 요소에 맞지 않는 경우 다음 요소가 가로 방향으로 넘치지 않고 자동으로 이전 요소의 아래쪽으로 스크롤되어 가로 스크롤 막대가 나타나는 것을 방지한다는 것입니다.

또한 절대 위치 지정(위치:절대)을 사용할 때는 매우 주의해야 합니다.

4. 적응형 이미지(유동 이미지)

"적응형 웹 디자인"은 레이아웃과 텍스트 외에도 이미지의 자동 크기 조정도 구현해야 합니다. 여기에는 CSS 코드 한 줄만 필요합니다:

🎜

img { -ms-interpolation-mode: bicubic; }

🎜이 코드 줄은 웹 페이지에 포함된 대부분의 비디오에도 유효하므로 다음과 같이 작성할 수 있습니다. 🎜

addLoadEvent(function() { 
 var imgs = 
 document.getElementById("content").getElementsByTagName("i
 mg");
  imgSizer.collate(imgs);
});

🎜이전 버전의 IE는 최대 너비를 지원하지 않습니다. 이므로 다음과 같이 작성해야 합니다. 🎜rrreee🎜 또한 Windows 플랫폼에서 이미지 크기를 조정하는 경우 이미지 왜곡이 발생할 수 있습니다. 이때 IE의 독점 명령인 🎜rrreee🎜 또는 Ethan Marcotte의 imgSizer.js: 🎜rrreee🎜권장 학습: 🎜CSS🎜🎜을 사용해 볼 수 있습니다.

위 내용은 CSS의 간단한 반응형 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!