Sưu tầm

/* 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;   }  }

Nếu bỏ qua các ứng dụng di động trên platform trong quá khứ, bạn có thể gặp một số khó khăn khi hỗ trợ trình duyệt cho di động với những trang web hiện tại của mình. Có rất nhiều điều để học hỏi, cả triệu công nghệ để lựa chọn và vô số công việc mà có khả năng là bạn sẽ cần cho những dự án hiện tại của mình. Một câu hỏi mà các designer và chủ website luôn muốn tìm hiểu là “Làm thế nào để tôi có thể thệm hỗ trợ điện thoại một cách nhanh chóng?” Đôi khi bạn không đủ ngân sách để bắt đầu lại từ đầu nhưng vẫn muốn có được phần tinh túy cho chiếc điện thoại. Hôm nay tôi sẽ giới thiệu 5 cách nhanh chóng giúp trang web của bạn trở nên thân thiện hơn với cấu hình của điện thoại. Sử dụng Fluid Layout Fluid layouts đã được sử dụng từ rất nhiều năm qua. Rất lâu trước khi nó được áp dụng vào thiết kế như chúng ta đã biết, rất nhiều web designer và developer đã sử dụng  kỹ thuật  này như giải pháp cho nhiều kích cỡ viewport khác nhau. .someColumn { width: 30%; } Thật dễ dàng khi tạo

How to target designs for the iPhone, iPad and desktop computers Excerpted from  iPhone & iPad Web Design For Dummies Updated 1-2013  since last publication By  Janine Warner  &  David LaFontaine Using CSS Media Queries you can change the design of a web page to display differently on an iPad than on an iPhone. The latest trend in web design requires creating one HTML page and then designing multiple style sheets to change the display based on the size of the screen where the page is viewed. When you design web pages with CSS, you can create multiple collections of style designed specifically for each device, and you can target those styles using media queries set to a specific browser width. CSS has included the ability to use media queries since before version 3, but in the past, media queries were primarily used to target style sheets based on options, such as whether the page would be printed or displayed on a computer. Targeting iPhones, iPads, and other C