Xepac design
The Blog Design code
Design code | 전체게시물 14
Design code리스트
Responsive Design
sample code section
each mobile screen design setting

/* ============ Tablet (Portrait) 768px - 959px ================ */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .logo {
       padding:0;
       margin:0;
   }
}
/*============= Mobile (portrait) < 767px =============*/
@media only screen and (max-width:767px) {
    .logo {
       padding:0;
       margin:0;
   }
}
/* ============ Mobile (Landscape) 480px - 767px ================= */
@media only screen and (min-width: 480px) and (max-width: 767px) {
   .logo {
       padding:0;
       margin:0;
   }
}
/* ================= Mobile (portrait) < 320px =================== */
@media only screen and (max-width: 317px) {
   .logo {
       padding:0;
       margin:0;
   }
}
@media code 활용 HTML5 responsive design code
각개 size마다 설정을 해야 하는 번거로움이있다.
css 용량도 커지고 작업량도 배가 된다.
Read more
Video Showing Dynamic Resizing
+108
Responsible design에서 풀스크린 video영역을 제어하는 tip입니다.

 In order to embed the video and along with that inflate full width to the boundary, 
we have a very useful CSS trick for all developers.

.video {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video iframe,
.video object,
.video embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Read more
 맨앞이전1234567
Tweets
    본 사이트는 크롬 브라우져에서 더 잘보입니다.
2012 Xepac design reserved. xepac.com