1. Hiện tại có một số member mạo danh BQT để giao dịch trên diễn đàn và đã LỪA ĐẢO khá nhiều tại chuyên mục Adwords... Mọi người cảnh giác và đọc bài: Giới thiệu giao dịch đảm bảo bởi @Admin

Các xu hướng sử dụng chiều rộng trong thiết kế web Responsive

Thảo luận trong 'Hỗ trợ thiết kế - Đồ hoạ cho Seo' bắt đầu bởi lamvt, 24/2/14.

Lượt xem: 283,457
  1. lamvt

    lamvt Cựu Administrator

    Gia nhập:
    14/9/11
    Bài viết:
    973
    Đã được thích:
    1,124
    Web:
    Thiết kế web Responsive là gì?

    Responsive Web Design (RWD) là xu hướng mới theo đó quy trình thiết kế và phát triển web sẽ đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thước và chiều của màn hình thiết bị. Để làm được điều đó chúng ta sẽ sử dụng linh hoạt kết hợp các kỹ thuật bao gồm flexible grid, responsive image và CSS media query. Khi người dùng chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình và kịch bản xử lý. Nói cách khác, các trang web cần phải có công nghệ tự động đáp ứng theo thiết bị của người dùng. Điều này sẽ loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web.
    [​IMG]

    Độ rộng của trang web Responsive là bao nhiêu?

    Từ thủa công nghệ web 2.0 độ rộng của website gần như mặc định ở giá trị 960 - 980 (xuất hiện nhiều frame work 960 cho cả website và các chương trình cho các nhà design như photoshop...).

    Xu thế mới hiện nay bạn sẽ thấy nhiều website độ rộng 100% theo màn hình thông thường hay sử dụng Fluid width: width: 100%; và các nhân tố cột bảng biểu còn lại đều sử dụng theo giá trị % chứ không sử dụng width = bao nhiêu px (pixel) như trước đây.

    Một số nhà thiết kế vẫn muốn giới hạn độ rộng của website theo một giới hạn nào đó cho maximum ví dụ: max-width: 960px hay max-width: 1160px; hoặc max-width: 1170px;
    Để làm được điều này vẫn đáp ứng tốt trên các trình duyệt việc hiểu và dùng CSS sao cho hợp lý là điều hết sức cần thiết.

    Sau đây là vài lời khuyên về việc tối ưu Css cho các thiết kế này:

    For default Width 970px and or 1170px
    Mã:
    /* Default Width: */
    .container {
    max-width: 1170px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    }
    .container {
    max-width: 970px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    }
    Normally standard 960 px, if you want to add css responsive for devices and browsers smaller than:
    Mã:
    /* Smaller than standard 960 (devices and browsers) */
    @media only screen and (max-width: 959px) {
    Your CSS code here
    }
    For Tablet Portrait and smaller than 960px we recommended to use:
    /* Tablet Portrait size to standard 960 (devices and browsers) */
    @media only screen and (min-width: 768px) and (max-width: 959px) {
    Your CSS code here
    }
    For all Standard Smarphone (mobile phone) you can add like code bellow
    Mã:
    /* All Mobile Sizes (devices and browser) */
    @media only screen and (max-width: 767px) {
    Your CSS code here
    }
    What happen with Mobile Landscape and Tablet Portrait in this case width from 480px for mobile (ex: Iphone) to 767px for tablet (ex:Ipad)
    Mã:
    /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
    @media only screen and (min-width: 480px) and (max-width: 767px) {
    Your CSS code here
    }
    CSS code for Mobile Portrait and Mobile Portrait in this case width maximum is smaller than 480px so we will use max-width:479px;
    Chủ đề liên quan:

    Tại sao bạn nên thiết kế Trang web tối ưu hóa cho Smartphone

    What recommended WIDTHs for joomla responsive templates

    How to creat joomla template 3.0 step by step: Boostrap and responsive Joomla 3.0 template

    Nguồn: Thegioiseo.com


Nội quy khi thảo luận:

Dù bạn có cố tình spam bằng cách nào khi BQT diễn đàn phát hiện sẽ lập tức banned nick và xoá toàn bộ bài viết của bạn. Ngoài ra khi phát hiện ra Spam hãy gửi thông báo cho BQT diễn đàn. Hãy suy nghĩ trước khi hành động..!
✓ Khi muốn trả lời ai đó, bạn gõ @ cộng thêm nick diễn đàn của người đó phía sau @, giống như tag tên trên Facebook.
✓ Yêu cầu khi bình luận, bạn phải gõ chữ rõ ràng, không viết tắt, gõ tiếng Việt đầy đủ dấu câu.
✓ Nên dùng font chữ mặc định của diễn đàn, không tô màu lòe loẹt hay dùng size chữ quá lớn khi bình luận.
✓ Bài viết, comment... không được phép quảng cáo dịch vụ, rao vặt, pr... Loại trừ ở chuyên mục Rao vặt đã cho phép.
✓ Nghiêm cấm các chủ đề dạng: Cứu em với, help me, giật tít, câu view... dưới mọi hình thức.
✓ Tất cả các thành viên tham gia diễn đàn cần đọc kỹ Nội quy chung và nghiêm túc tuân thủ.


Chia sẻ trang này

Đang tải...