Tính toán kích thước trong CSS với Calc()

Thảo luận trong 'Lập trình Html/Css' bắt đầu bởi sontv, 2/11/16.

Đã xem: 25,755

  1. sontv Thành Viên

    Hiện nay giao diện responsive đa quá quen thuộc với người dùng.Các website đang dần được mobile hóa dưới dạng responve và mobile riêng.Khi sử dụng responsive điều quan trọng là tính % các cột 1 cách hợp lý.Hôm nay tôi sẽ giới thiệu cho các bạn một hàm đó là hàm calc() – Hàm tính toán kích thước sẽ rất hữu dụng cho bạn trong việc làm responsive.

    Giả sử giao diện của bạn có 2 cột, mỗi cột bạn sẽ đặt chiều rộng là 50%, vấn đề bây giờ là bạn muốn chiều rộng 50% đó bao gồm cả giá trị margin và padding thì sao, giả sử 2 cột đó bạn sẽ đặt thuộc tính float và muốn chúng cách nhau 20px vấn đề này chắc bạn phải cần đến javaScript tính toán rồi gán giá trị cho 2 phần tử tương đương với 2 cột theo ý của bạn, lúc này bạn sẽ thấy hàm calc() vô cùng hữu ích, bạn chỉ cần áp dụng như ví dụ sau:

    #section1, #section2{
    float: left;
    width: calc(50%- 20px);
    }
    #section2{
    margin-left: 20px;
    }


    Với cách làm trên bạn sẽ luôn có được sự đảm bảo rằng giao diện responsive của bạn có thể co giản một cách thoải mái và sẽ vẫn dữ nguyên tỷ lệ kích thước mà bạn đặt. Bây giờ nếu bạn muốn thêm 10px padding nữa và 1px border nữa thì cũng vô cùng đơn giản, ví dụ:

    #section1, #section2{

    float: left;
    width: calc(50%- 10px- 20px- 2px);
    padding: 10px;
    border: 1pxsolid#f00;
    }
    #section2{
    margin-left: 20px;
    }


    Tính năng nay hiện chỉ hổ trợ ở các trình duyệt hiện đại, với Internet Explorer từ phiên bản 9 trở lên, Firefox Chrome thì phải sử dụng thêm tiền tố prefix riêng -moz-, -webkit-. Xem chi tiết trình duyệt và phiên bản hổ trợ tại caniuse.com

    Hãy tham khảo và chia sẻ kinh nghiệm của mình về html/css tại : http://vnseosem.com/forums/lap-trinh-html-css.202/

    Cám on!
     
    Đang tải...
    nam lim xanh

    Bình Luận Bằng Facebook

  2. caodat Thành Viên

    Số bài viết: 24
    Đã được thích: 2
    Điểm thành tích: 3
    Web:
    respon bây giờ dùng bootstrap nhiều rồi.code tay thì mệt lắm. bootstrap hỗ trợ nhiều thư viện và giao diện cũng khá bắt mắt. dùng bootstrap còn hỗ trợ các thư viện js nữa.
     
  3. sontv Thành Viên

    Số bài viết: 13
    Đã được thích: 5
    Điểm thành tích: 3
    Khi bạn code đến 1 mức độ nào đó bạn sẽ thấy thư viện boostrap không thể dùng hết và gây ra giảm tốc độ load của trang.Lúc đó bạn sẽ tự xây dựng 1 thư viện cho riêng mình chứ không nên quá lạm dụng những cái có sẵn!
     
  4. Độc Cô Cầu Bại Thành Viên

    Số bài viết: 26
    Đã được thích: 7
    Điểm thành tích: 16
    Mình đổng quan điểm với bạn. vì thư viện boostrap khá nặng ảnh hưởng đến tốc độ load trang. Cái gì mình cảm thấy cần thiết thì mình tự code thôi. Vì người xây dựng ra thư viện đó cũng là code thôi ko có gì là cao siêu cả.