Sưu tầm

There are a few ways to center vertically. In terms of block level elements, the methods are quirky. Inline elements are much simpler to center: If you know the height of your containing div, and the height of your inner centered div,  or, if you the height of your inner div does not matter, then vertical aligning is simple.  However, if you are vertically centering anything that is variable, such as text, vertical centering is more complex and require hacks. The HTML used in our examples: <div id="containingBlock"> <div> <p>This sentence will change in each example</p> </div> </div> Note: I will post an entry on vertical centering of text soon Mathematical Method for known heights: When you know the height of the containing element, and the height of the element being vertically centered, simply use math to figure out the height of the margins on the inner element. #containingBlock {display: block; height: 200px;} #contain

Tạo ra một giao diện web đã khó, làm cho giao diện của mình có khả năng tương thích với những kích thước màn hình khác nhau(thường được gọi là  web responsive design ) lại càng khó khăn hơn, kiểm tra trên các kích cỡ màn hình phổ biến như smart phone, tablet. laptop, desktop... cũng không phải chuyện dễ dàng. Bạn sẽ có nhiều cách tiếp cận với web responsive khác nhau, tuy nhiên một trong những cách tiếp cận đơn giản và dễ dàng nhất là sử dụng những công cụ, phần mềm, đoạn mã được cộng đồng phát triển và chia sẻ để tiếp cận responsive web design . Phương pháp này giúp tiết kiệm được rất nhiều thời gian và công sức của bạn. Tuy nhiên, một vấn đề phát sinh nữa là có hằng hà sa số những công cụ như vậy và công cụ nào là tốt nhất ? Trong bài viết này tôi cố gắng tổng kết lại những công cụ phát triển  responsive web design  phổ biến và cần thiết nhất cho bạn mà theo tôi là hữu ích nhất. Tôi cũng hi vọng danh sách này có ích cho bạn. Xem thêm 7 lời khuyên hữu ích (Responsive Design: 7 l

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ---

320 x 480 iPhone 3G/3GS 480 x 720 Meizu M8 480 x 800 Google Nexus one 640 x 960 iPhone 4 768 x 1024 iPad 480 x 320 iPhone 3G/3GS 720 x 480 Meizu M8 800 x 480 Google Nexus one 960 x 640 iPhone 4 1024 x 768 iPad 1024 x 600 Most Netbooks 1280 x 800 MacBook Air 08 1366 x 768 Some Laptops 1440 x 900 MacBook Pro 15 inches Maximum Resize to Maximum + create a new preset

Trước đây, CSS2 cho phép bạn ấn định stylesheet nào sẽ dùng cho từng thiết bị tương ứng( màn hình hay máy in chẳng hạn). Bây giờ CSS3 thậm chí còn làm được nhiều hơn thế nhờ khả năng truy vấn thiết bị(media queries). Bạn chỉ cần thêm câu lệnh điều kiện để kiểm tra và áp dụng cho các stylesheet khác nhau. Ví dụ, bạn có 2 stylesheet khác nhau, định dạng thứ nhất dùng cho màn hình cỡ lớn, định dạng thứ hai dùng cho điện thoại di động. Khả năng này của CSS3 thực sự hữu dụng, vì nó cho phép mẫu  thiết kế  của bạn có khả năng hiển thị trên các thiết bị và độ phân giải màn hình khác nhau. Bạn hãy đọc phần hướng dẫn sau đây và lướt qua một số site đã áp dụng tốt khả năng  truy vấn media của CSS3 . Truy vấn media CSS3 Kiểm tra bản  demo , định lại kích thước cửa sổ trình duyệt để xem nó biến đổi ra sao. Độ rộng tối đa Nếu độ rộng vùng hiển thị nhỏ hơn 600px, câu lệnh CSS sau sẽ được thực hiện. @media   screen  and ( max-width:   600px ) {  .class   {   background:   #ccc;   }  }