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.

Bạn phải click vào đây
để like, thì comment face của bạn mới được lên đầu
Để comment nhiều người biết đến
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...

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 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..

Bán hàng trực tuyến hiệu quả với Web Responsive

Tại sao nhất định phải xây dựng một trang web responsive? Xây dựng một trang web hiệu quả chiếm 80% thành công của việc mua bán trực tuyến. Web responsive hay còn gọi là web ứng dụng là dạng web có thể thích ứng được với mọi định dạng màn hình như máy tính, di dộng, tablet…

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.

Thiết kế giao diện Responsive Web Design

Ngày nay, do sự phát triển chóng mặt của các smartphone và tablet, nên ta cần phải làm sao cho website hiển thị tốt trên mọi thiết bị có kích thước khác nhau, bên cạnh đó cũng có nhiều người dùng không bao giờ maximize trình duyệt của họ. Để đáp ứng được nhu cầu đó hiện tại theo tôi biết thì người ta có 2 cách làm :

Ứng dụng của Responsive Web Design khi thiết kế website - phần 1

Bạn thể thấy khi sử dụng trình duyệt trên các thiết bị di động với độ phân giải khác nhau,một vấn đề lớn bạn gặp phải là kích thước của hình ảnh. Đối với một nhà thiết kế web thì có nhiều cách để xử lý vấn đề trên.Nhưng lựa chọn phổ biến nhất là sử dụng CSS’s max-width để dễ dàng sửa chữa điều này

Ứng dụng của Responsive Web Design khi thiết kế website phần 2

CSS3 hỗ trợ tất cả các loại thiết bị truyền thông tương tự như CSS 2.1 , chẳng hạn như màn hình , in ấn và thiết bị cầm tay , nhưng đã có thêm hàng chục tính năng hỗ trợ phương tiện truyền thông mới , bao gồm cả chiều rộng tối đa , thiết bị rộng , định hướng và màu sắc.

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

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...

Xu hướng duyệt web trên thiết bị di động?

Năm 2014 và tương lai, mọi người đang truy cập Internet bằng nhiều cách khác nhau . Thiết bị di động , chẳng hạn như iPhone và máy tính bảng , đã trở nên đặc biệt phổ biến với công chúng...

Vì sao nên áp dụng thiết kế Responsive Web Design

Từ sự phổ biến và phát triển thịnh hành của smartphone và các thiết bị di động, thiết kế web responsive trở thành xu hướng thiết kế web hot nhất hiện nay. Thiết kế web Responsive được coi là cách tiếp cận mới và là giải pháp tuyệt vời nhất cho phép một trang web khi chạy trên các nền di động khác nhau mà vẫn giữ nguyên giao diện ban đầu.

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ệ