[CSS3] 드림위버 media queries js 미디어 쿼리를 이용한 리사이징

HTML5 Cross Browser Plolyfills

 

CSS3 Media Queries

 

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

 

• css3-mediaqueries-js
• Respond by Scott Jehl
  • A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)
• mediatizr by Aurélien Delogu
  • Responsive-oriented CSS3 media queries polyfill
• matchMedia by Scott Jehl, Paul Irish, Nicholas Zakas
  • A standardized way to check media query matching in script.
• jQuery Media Helpers by Scott Jehl
  • Some media query and cross-browser responsive design helpers, abstracted from jQuery Mobile

 

 

Respond 처리를 위한 javascript  ==  드림위버6에서 사용되고 있는 javascript코드

https://github.com/scottjehl/Respond

 

 

드림위버에서 사용되는 Respond 웹을 구현을 위한 기본 소스 예제입니다.

first.zip

다운로드

 

 

---

 

MSD: Mozilla Developer Network

CSS media queries 설명 : https://developer.mozilla.org/ko/docs/Web/Guide/CSS/Media_queries

Syntax

<!-- CSS media query on a link element -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />

<!-- CSS media query within a stylesheet -->
<style>
@media (max-width: 600px) {
  .facet_sidebar {
    display: none;
  }
}
</style>