Trang chủ » Kiến thức » Kiến thức Responsive Web Design

CSS3 cho phép thiết kế Responsive Design tốt và hơn thế nữa.

Nếu bạn nằm trong giới thương mại thiết kế web từ giữa những năm 1990, bạn sẽ nhớ rằng trước đó, tất cả các mẫu thiết kế được dựa trên bảng và phong cách đã được gắn chặt với nội dung.

Cascading Style Sheets (CSS) đã được giới thiệu như là một cách tách từ thiết kế nội dung. Phải mất một khoản thời gian để thiết kế web bước vào thế giới mang đậm kỹ thuật thiết kế dựa trên CSS nhưng các trang web như http://www.csszengarden.com mở đường, thấy chỉ là những gì có thể đạt được, trực quan, với một thiết kế dựa trên CSS. Kể từ đó, CSS đã trở thành phương pháp chuẩn xác định các lớp presentational của một trang web, với CSS 2.1 là phiên bản được phê duyệt hiện tại của đặc tả CSS. CSS3 vẫn chưa được phê chuẩn đầy đủ nhưng điều đó không có nghĩa là phần lớn của nó không phải là hoàn toàn có thể sử dụng ngày hôm nay.

W3C làm việc nhóm lưu ý ở http://www.w3.org/TR/CSS/ # css3is như sau:

CSS Cấp 3 được xây dựng trên CSS Cấp 2 mô-đun bằng mô-đun, bằng cách sử dụng CSS2.1 đặc điểm kỹ thuật như cốt lõi của nó. Mỗi mô-đun bổ sung thêm chức năng và / hoặc thay thế một phần của CSS2.1 đặc điểm kỹ thuật. Nhóm công tác CSS dự định rằng các mô-đun CSS mới sẽ không mâu thuẫn với các đặc điểm kỹ thuật CSS2.1: chỉ rằng họ sẽ thêm chức năng và tinh chỉnh các định nghĩa.

Phần lớn các đặc điểm kỹ thuật W3C dự thảo lần đọc (bởi sự cần thiết) như legalese. trong đơn giản điều khoản, điều quan trọng với chúng tôi là CSS3 được xây dựng như một bộ 'bolt-on' mô-đun hơn một tổng thể hợp nhất duy nhất. Như CSS 2.1 là cốt lõi, không có kỹ thuật mà bạn sử dụng với CSS 2.1 hôm nay đang bị bỏ rơi. Thay vào đó, nhất định, mô-đun trưởng thành hơn (như không tất cả các mô-đun ở cùng một nhà nước sẵn sàng) của CSS3 có thể được chủ động sử dụng ngày hôm nay, mà không cần chờ đợi cho toàn bộ đặc điểm kỹ thuật được phê chuẩn.


CSS3 cho phép thiết kế Responsive Design tốt và hơn thế nữa.

Phía dưới dòng CSS3 sẽ không phá vỡ bất cứ điều gì! Có lẽ là điểm quyền năng nhất của lưu ý là không có hình phạt trong cũ trình duyệt cho bao gồm cả tài sản mà họ không hiểu. các trình duyệt cũ (kể cả Internet Explorer 6, 7, và 8) hạnh phúc sẽ bỏ qua các thuộc tính CSS3 rằng họ không thể xử lý. Điều này cho phép chúng ta khả năng để dần dần nâng cao khu vực của một thiết kế cho các trình duyệt trang bị tốt hơn, trong khi đảm bảo một mùa thu hợp lý trở lại cho những người lớn tuổi.

Làm thế nào có thể giải quyết CSS3 thiết kế hàng ngày

vấn đề?

Chúng ta hãy xem xét một trở ngại thiết kế phổ biến tất cả chúng ta phải đối mặt trên hầu hết các dự án để tạo ra một góc tròn trên một thành phần màn hình, có lẽ đối với một giao diện tab hoặc góc của một đóng hộp thành phần như tiêu đề ví dụ. Sử dụng CSS 2.1 này có thể đạt được bằng cách sử dụng một doorstechnique trượt (http://www.alistapart.com/articles/ slidingdoors /), trong đó một hình nền nằm sau khác. HTML có thể nhìn đơn giản như sau:

<a href="#"><span>Box Title</span></a>

Chúng tôi thêm một nền tảng làm tròn đến các thành phần <a> bằng cách tạo ra hai hình ảnh. Đầu tiên, gọi là headerLeft.png, sẽ là 15 điểm ảnh và 40 điểm ảnh cao và lần thứ hai, gọi là headerRight.png trong ví dụ này, sẽ được thực hiện rộng hơn chúng ta sẽ bao giờ dự đoán tiêu đề là (280 điểm ảnh, ở đây). Mỗi người sẽ có một nửa của "trượt cửa ". Là một trong những thành phần phát triển (các văn bản trong thẻ <span> của chúng tôi), nền lấp đầy không gian tạo ra một bằng chứng nào trong tương lai giải pháp làm tròn góc. Ở đây thì CSS trong ví dụ này trong là như thế nào:

a {

display: block;

height: 40px;

float: left;

font-size: 1.2em;

padding-right: 0.8em;

background: url(images/headerRight.png) no-repeat scroll top right;

Getting Started with HTML5, CSS3, and Responsive Web Design

[26 ]

}

a span {

background: url(images/headerLeft.png) no-repeat;

display: block;

line-height: 40px;

padding-left: 0.8em;

}

Nó giải quyết các vấn đề thiết kế nhưng đòi hỏi phải đánh dấu bổ sung (ngữ nghĩa thành phần <span> không có giá trị) và hai yêu cầu HTTP bổ sung (đối với các hình ảnh) đến máy chủ để tạo hiệu ứng trên màn hình. Bây giờ, chúng ta có thể kết hợp hai hình ảnh thành một để tạo ra một ma và sau đó sử dụng background-position: thuộc tính CSS chuyển nó xung quanh nhưng ngay cả với các nền kinh tế băng thông cung cấp, nó vẫn là một giải pháp linh hoạt. Điều gì xảy ra nếu khách hàng quyết định họ muốn các góc để có một bán kính chặt chẽ hơn? Hoặc một màu sắc khác nhau? Chúng ta cần phải làm lại hình ảnh của chúng tôi (s) một lần nữa. Đáng buồn thay, cho đến khi CSS3, điều này đã được thực tế của tình hình chúng ta, những nhà thiết kế lối vào và các nhà phát triển đã tìm thấy chính mình in Thưa quý ông, tôi đã nhìn thấy tương lai, và nó CSS3 hình! Chúng ta hãy sửa đổi HTML để chỉ:


CSS3 cho phép thiết kế Responsive Design tốt và hơn thế nữa.

<a href="#"> Box Tiêu đề </ a>

Và để bắt đầu với, CSS có thể trở thành như sau:

một {

float: left;

chiều cao: 40px;

line-height: 40px;

padding-left: 0.8em;

padding-ngay: 0.8em;

biên giới-top-trái-bán kính: 8px;

cửa trên bên phải-bán kính: 8px;

background-image: url (images / headerTiny.png);

background-repeat: repeat-x;

}

Trong ví dụ này, hai hình ảnh trước đây đã được thay thế cho 1 hình ảnh pixelwide duy nhất đó là lặp đi lặp lại dọc theo trục x. Mặc dù hình ảnh chỉ có 1 pixel rộng, đó là 40 điểm ảnh cao, hy vọng cao hơn so với bất kỳ nội dung đó sẽ được chèn vào. Khi sử dụng một hình ảnh như một nền tảng, đó là luôn luôn cần thiết để "vượt qua" các chiều cao, với dự đoán của tràn nội dung, buồn bã làm cho hình ảnh lớn hơn và các yêu cầu băng thông lớn hơn. Ở đây, tuy nhiên, không giống như các giải pháp hoàn toàn imagebased, CSS3 sẽ chăm sóc của các góc cho chúng tôi với các cửa radiusand tài sản liên quan. Khách hàng muốn các góc được một chút tròn, khoảng 12 pixel? không vấn đề, chỉ cần sửa đổi các cửa radiusproperty để 12pxand công việc của bạn được thực hiện. CSS3 làm tròn góc propertyis nhanh, linh hoạt, và hỗ trợ trong Safari (v3 +), Firefox (v1 +), Opera (v10.5 +), Chrome (v3 +), và Internet Explorer 9. Microsoft là rất vui mừng về hỗ trợ trình duyệt IE 9 của các tính năng (Tôi hy vọng bạn cảm thấy mỉa mai nhẹ của tôi thấm qua đây) họ thậm chí còn thiết kế một trang Thể hiện tương tác những tác động khác nhau mà có thể đạt được với các cửa radiusproperty. xem này trình diễn tại URL sau: http://ie.microsoft.com/testdrive/html5/borderradius/default.html CSS3 có thể có những điều xa hơn bằng cách loại bỏ sự cần thiết cho một nền gradient hình ảnh bằng cách sản xuất hiệu quả trong trình duyệt thay thế. Khách sạn này không phải là tốt hỗ trợ nhưng với một cái gì đó dọc theo dòng tuyến tính gradient (màu vàng, màu xanh), là nền tảng của bất kỳ yếu tố có thể thưởng thức một gradient CSS3 tạo ra.

CSS3 cho phép thiết kế Responsive Design tốt và hơn thế nữa.

Gradient có thể được xác định trong một màu, giá trị HEX truyền thống (ví dụ, # BFBFBF) hoặc sử dụngmột trong những chế độ màu CSS3 (nhiều hơn về những trong Chương 5, CSS3: Bộ chọn, Typography, và chế độ màu). Nếu bạn hài lòng cho người sử dụng các trình duyệt cũ nhìn thấy một nền tảng vững chắc thay vì một gradient (như trái ngược với không có gì), một CSS chồng một cái gì đó như thế này sẽ cung cấp một màu trong các sự kiện của trình duyệt được không thể xử lý gradient:

background-color: #42c264;

background-image: -webkit-linear-gradient(#4fec50, #42c264);

background-image: -moz-linear-gradient(#4fec50, #42c264);

background-image: -o-linear-gradient(#4fec50, #42c264);

background-image: -ms-linear-gradient(#4fec50, #42c264);

background-image: -chrome-linear-gradient(#4fec50, #42c264);

background-image: linear-gradient(#4fec50, #42c264);

Thuộc tính linear-gradient chỉ thị các trình duyệt để bắt đầu với màu đầu tiên giá trị (# 4fec50, trong ví dụ này) và di chuyển với giá trị màu sắc thứ hai (# 42c264). Bạn sẽ nhận thấy rằng trong các mã CSS, nền hình ảnh thuộc tính linear-gradient đã được lặp đi lặp lại với một số lượng tiền tố; ví dụ,-webkit-. này cho phép các nhà cung cấp trình duyệt khác nhau (ví dụ,-moz cho Mozilla Firefox,-ms-cho Microsoft Internet Explorer, vv) để thử nghiệm với việc thực hiện của mình các thuộc tính CSS3 mới trước khi giới thiệu bài viết kết thúc, lúc này các tiền tố là không cần thiết. Như stylesheets bởi thác bản chất của họ, chúng ta đặt các phiên bản không tiền tố cuối cùng, có nghĩa là nó sẽ thay thế tờ khai trước đó nếu có.

Có thể HTML5 và CSS3 làm việc cho chúng ta ngày hôm nay?

Bất kỳ công cụ hay kỹ thuật chỉ nên được sử dụng nếu ứng dụng đòi hỏi. Như nhà phát triển / thiết kế FrontEnd, dự án của chúng ta thường đi kèm với một số lượng hữu hạn của thời gian và nguồn lực sẵn có để làm cho họ khả thi về mặt tài chính.

Internet Explorer 7 và 8 không hỗ trợ các yếu tố HTML5 ngữ nghĩa mới hoặc Thuộc tính CSS3 như là tiêu chuẩn, nếu phần lớn khách truy cập vào một trang web sử dụng Internet Explorer 7 hoặc 8, nó không làm cho rất nhiều ý nghĩa để tập trung nguồn lực của bạn trên xây dựng một responsive HTML5 và CSS3 dựa trên thiết kế cho nó. Đó không có nghĩa làm như vậy là một nhiệm vụ không thể. Như chúng ta sẽ thấy trong Chương 9, giải quyết Cross-trình duyệt Những thách thức đáp ứng, có một số lượng lớn các công cụ (gọi tắt là polyfillsas họ bao gồm các vết nứt trong các trình duyệt cũ) để vá các trình duyệt (chủ yếu là Old IE) thiếu hỗ trợ cho các tính năng mới hơn của trình duyệt, nhưng việc áp dụng một cách tiếp cận hợp lý để các thực hiện một thiết kế web đáp ứng ngay từ đầu luôn luôn là chính sách tốt nhất. Theo kinh nghiệm của riêng tôi, tôi thường yêu cầu sau đây ngay từ đầu:

• Có khách hàng muốn hỗ trợ các thị trường đang phát triển lớn nhất của người sử dụng Internet?

Nếu có, phương pháp đáp ứng phù hợp.

• Có khách hàng muốn sạch, nhanh nhất, và duy trì cơ sở mã nhất? Nếu có, phương pháp đáp ứng phù hợp.

• Liệu khách hàng hiểu kinh nghiệm có thể và nên được tinh tế khác nhau trên các trình duyệt khác nhau? Nếu có, phương pháp đáp ứng phù hợp.

• Liệu khách hàng yêu cầu thiết kế để trông giống hệt nhau trên tất cả các trình duyệt,

bao gồm cả IE 8 và các phiên bản thấp hơn? Nếu có, thiết kế đáp ứng không phải là phù hợp nhất.

• Có 70 phần trăm hoặc hơn của các du khách hiện tại hoặc dự kiến ​​sẽ trang web có khả năng

sử dụng Internet Explorer 8 hoặc phiên bản thấp hơn? Nếu có, thiết kế đáp ứng không phải là phù hợp nhất.

Nó cũng quan trọng để tái iterate là nơi mà các ngân sách cho phép, có thể có lần khi một "di động" phiên bản đầy đủ riêng biệt của một trang web là một lựa chọn phù hợp hơn một thiết kế đáp ứng. Vì lợi ích của làm rõ, tôi hạn hoàn toàn điện thoại di động tập trung các giải pháp cung cấp nội dung / kinh nghiệm khác nhau cho người sử dụng điện thoại di động của họ là "điện thoại di động trang web '. Tôi không tin bất cứ ai ủng hộ kỹ thuật thiết kế web đáp ứng sẽ cho rằng một thiết kế web đáp ứng sẽ là một thay thế thích hợp cho một 'trang web di động "trong mọi tình huống.

thiết kế web đáp ứng không phải là viên đạn kỳ diệu

Có nguy cơ "bà giảng dạy để hút trứng", nó có giá trị lại nói rằng một đáp ứng thiết kế web HTML5 và CSS3 không phải là một "viên đạn ma thuật" thuốc chữa bách bệnh cho tất cả thiết kế và những thách thức nội dung phục vụ. Hơn bao giờ hết với thiết kế web, các chi tiết cụ thể của một dự án (cụ thể là ngân sách, mục tiêu nhân khẩu học, và mục đích) nên ra lệnh việc thực hiện. Tuy nhiên, theo kinh nghiệm của tôi, nếu ngân sách hạn chế và / hoặc các chương trình của một "trang web di động" hoàn toàn riêng biệt không phải là một lựa chọn, một thiết kế web đáp ứng hầu như luôn luôn cung cấp cho người sử dụng tốt hơn và toàn diện hơn kinh nghiệm hơn một tiêu chuẩn, thiết kế chiều rộng cố định.

Kiến thức tiếp theo
Kiến thức đọc nhiều

Xây dựng website bán hàng tối ưu thiết bị di động là điều rất quan trọng

Hiện nay với sự xuất hiện của rất nhiều các điện thoại thông minh được sản xuất và nó có giá phục vụ nhu cầu của rất nhiều tầng lớp khách hàng. Người dùng truy cập điện thoại thông minh để tìm kiếm những gì họ cần là rất nhiều vì vậy có một trang web đáp ứng điện thoại di động có lẽ là quan trọng nhất, và như vậy đòi hỏi các doanh nghiệp bán hàng trực tuyến là tạo ra một trang website tối ưu di động.

CSS trick trong thiết kế giao diện Responsive Web Design

Trong thiết kế giao diện responsive , người ta thường chú trọng vào % hơn là px. Để hiểu tại sao thì tôi sẽ lấy ví dụ nếu bạn thiết kế web trên desktop với chuẩn width 1400px...

Những thuận lợi và thách thức khi thiết kế web Responsive

Responsive Web Design (hay còn gọi "Thiết Kế Web Đáp Ứng") là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính mỹ thuật với độ hiển thị nội dụng co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone, với mọi độ phân giải màn hình, duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi chế độ phân giải.

Web responsive tương tác tuyệt vời cho người dùng.

Với sự phát triển ngày một nhanh ngày một nhanh của Công nghệ, người dùng không chỉ trải nghiệm và tìm kiếm thông tin chỉ qua máy tính để bàn ( PC ), mà còn từ máy tính bảng ( tablet ), điện thoại thông minh ( smart phone ), TV 4K..

Cuộc đột phá của công nghệ thiết kế Web Responsive

Hiện nay, Responsive website không còn là khái niệm xa lạ trên thế giới. Với tốc độ phát triển đáng ngạc nhiên của các thiết bị di động, chắc chắn rằng chỉ trong thời gian ngắn nữa, bạn sẽ thấy các website Việt Nam cũng dần thay đổi theo xu thế này. Đơn giản bởi vì website của chúng ta phải thay đổi phù hợp với xu hướng của người dùng...

So Sánh Thiết Kế Responsive Web Design, Web Mobile, Mobile App. Thiết kế nào ưu điểm nhất?

Khuynh hướng thiết kế một website đáp ứng với các thiết bị di động là điều tất yếu đối với nhu cầu sử dụng của người dùng hiện nay. Responsive Web Design , Web Mobile và Ứng dụng Mobile là 3 thiết kế ứng dụng giúp website hiển thị trên các thiết bị di động. Thiết kế nào nào tốt nhât...

Web 2.0 là gì? Và ý nghĩa của web 2.0

Hiện nay khái niệm web 2.0 đang ngày trở nên phổ biến. Mới nghe thì có vẻ như khái niệm web 2.0 là để chỉ một nền tảng, một công nghệ hoặc một bộ mã nguồn nào đó. Nhưng tất cả đều không phải. Hôm nay, hãy cùng vGing tìm hiểu xem web 2.0 là gì nhé.

Những xu hướng thiết kế website mới đáng lưu ý hiện nay

Mạng toàn cầu và những nội dung trên nó luôn thay đổi liên tục, luôn có những xu hướng và phong cách thiết kế nội dung mới được tạo ra và phát triển mạnh mẽ. Hãy cùng vGing điểm qua những xu hướng thiết kế web đang trở thành hiện tượng gần đây:

Thiết kế web di động chuyên nghiệp với Responsive Web Design. Xu hướng toàn cầu và cơ hội cho bạn.

Thiết kế web thân thiện với thiết bị di động đang là xu hướng chung toàn cầu khi mà trong một thập kỷ qua, lượng thiết bị di động tăng đột biến. Cũng như lưu lượng duyệt web qua di động đã chiếm đến hơn 60 % lưu lượng duyệt web toàn cầu trong cuối năm 2014 vừa qua. Vậy đâu là giải pháp thiết kế web di động chuyên nghiệp và cơ hội nào cho website của bạn trong kỷ nguyên di động ?

Web Responsive – Giải pháp hiệu quả Marketing Online cho Mobile

Web responsive không đơn thuần là tạo ra sản phẩm đẹp trong mắt người dùng mà còn là công việc tạo ra trải nghiệm mới cho người dùng. Các sản phẩm di dộng thông minh tạo ra một thời kỳ mới cho việc trải nghiệm internet...

Website được thiết kế Responsive sẽ lợi thế cạnh tranh hơn đối thủ trong cuộc đua Top SEO Google

Khi bạn thiết kế một trang web mà phù hợp với tất cả các kích thước của màn hình cả máy tính bàn, máy tính bảng, di động… sẽ nhận được rất nhiều thu hút từ phía người dùng. Bởi website của bạn được mọi người truy cập đến mọi lúc mọi nơi trên mọi thiết bị. Sử dụng thiết kế web responsive là một cách hiệu quả để tối ưu cho tất cả các thiết bị sẽ giúp giành được các ưu thế từ tìm kiếm di động.

Tại sao doanh nghiệp của bạn cần thiết kế web đáp ứng Responsive?

Trong năm qua responsive web đã trở thành chủ đề nóng trong cộng đồng thiết kế web. Responsive web là thiết kế web ứng dụng trong đó website linh hoạt điều chỉnh sao cho phù hợp kích cỡ màn hình cũng như nền tảng mà người truy cập sử dụng...

Hãy like face để theo dõi bài viết mới
vGing · Giới thiệu · Dịch vụ · Khách hàng · Blog · Kiến thức · Liên hệ