Bạn có thể sử dụng jQuery để thiết kế web đáp ứng không?

11

Tôi đã được giao nhiệm vụ cập nhật một trang web để làm cho nó phản hồi và xuất hiện chính xác trên điện thoại thông minh. Thật không may, trang web ở dạng hiện tại của nó không dễ làm việc với - tôi không thể thay đổi CSS.

Có bị coi là xấu khi phát hiện kích thước trình duyệt và thực hiện các thay đổi CSS với jQuery không?

Ví dụ:

if ($(window).width() < 960) {
    //make heaps of CSS changes 
}

— MeltingDog
nguồn

7

Thay vào đó, bạn nên cân nhắc sử dụng truy vấn Phương tiện vì đây là tiêu chuẩn được đề xuất bởi W3C kể từ tháng 6 năm 2012.

— Zistoloen

Bạn có nghĩa là để thay đổi phong cách tờ? Tôi cũng nghĩ vậy, nhưng tôi vẫn sẽ phải thay đổi rất nhiều yếu tố

— MeltingDog

Đúng. Trong mọi trường hợp, tôi nghĩ bạn sẽ có rất nhiều thay đổi CSS.

— Zistoloen

2

Câu "Tôi đã được giao nhiệm vụ cập nhật một trang web để làm cho nó phản hồi nhanh" không nên được theo sau bởi "Tôi không thể thay đổi CSS"

— Francisco Presencia

4

mọi thứ cần nhiều jQuery hơn ( Tuyên bố miễn trừ trách nhiệm: đừng coi trọng vấn đề này )

— Darkhogg

13

Chắc chắn rồi. Rõ ràng, sẽ tốt hơn nếu sử dụng CSS một mình nhưng nếu bạn không thể, hãy sử dụng những gì bạn có. Làm nhiều nhất có thể với CSS và sử dụng JS khi cần. Không chắc chắn lý do tại sao bạn không thể thay đổi CSS hiện tại nhưng bạn có thể thêm một biểu định kiểu với JS.

(function() {
  //create a new element
  var newStyle = document.createElement("link");

  //set the required attribute for a valid css file
  newStyle.rel = "stylesheet";
  newStyle.href = "http://example.com/the/location/of/your/css/stylesheet.css";

  //and then append it to the <head>
  document.getElementsByTagName("head")[0].appendChild(newStyle);
})();

Nguồn: http://christian-fei.com/add-stylesheets-after-the-head-USE-javascript/

sau đó thực hiện các truy vấn CSS / media.

Hoặc với jQuery:

$('head').append('<link rel="stylesheet" type="text/css" href="{url}">');

Tôi đã thực hiện phản hồi 'giao diện' trong đó một số thứ không thể thực hiện được mà không thay đổi DOM. Nếu bạn không có quyền truy cập vào HTML, thao tác JS DOM đôi khi là câu trả lời duy nhất.

EDIT:
Tùy thuộc vào yêu cầu trực quan của phiên bản màn hình nhỏ của bạn, bạn có thể ngạc nhiên về việc đoạn mã CSS này sẽ đưa bạn đến đâu để 'thân thiện với thiết bị di động'.

/* hopefully the original CSS developer didn't include a bunch of !importants.*/
div, p, ul, table, img {
    float: none !important;
    max-width: 96% !important; /* breathing room on the sides */
    margin-left: auto
    margin-right: auto; 
}

Nếu nhà phát triển CSS ban đầu quá yêu thích !importantvà bạn không thể truy cập HTML, bạn có thể sử dụng jQuery / JS để thêm ID vào phần thân hoặc bộ chứa mức cao và thêm nó vào bộ chọn của bạn.

   #i-will-beat-you-important div,
   #i-will-beat-you-important p,
   #i-will-beat-you-important ul { 
        float: none !important; 
        ...
   }

— Sẽ
nguồn

Từ kinh nghiệm của tôi, thiết kế đáp ứng có thể được thực hiện chỉ với css. Ngay khi thiết kế của bạn cũng cần trở nên thích ứng, có lẽ bạn cũng cần một số Javascript. Hãy nhớ rằng bạn muốn giữ javascript tối thiểu nhất có thể.

— Marco

4

Tôi sẽ nói hãy thử sử dụng các truy vấn phương tiện đầu tiên. Một phương pháp tôi thấy dễ dàng hơn khi xử lý một thiết kế ban đầu chỉ dành cho máy tính để bàn là:

Bắt đầu với hai bảng định kiểu riêng biệt. Một cho thiết kế đáp ứng mới, và một cho phiên bản máy tính để bàn cũ:

<link rel="stylesheet" media="screen and (max-width: 959px)" href="css/mobile.css">
<link rel="stylesheet" media="screen and (min-width: 960px)" href="css/desktop.css">

Tất cả các kiểu cũ có thể được chứa trong desktop.css . Trong khi đó, bạn có thể bắt đầu từ đầu trong mobile.css . Bạn có thể thấy bạn có thể tạo một bố cục cột đơn đẹp trong CSS di động đó cũng hoạt động cho máy tính bảng.

Cách tiếp cận này cho phép bạn có một khởi đầu mới và bạn có thể tạo kiểu đặc biệt chỉ cho điện thoại di động và máy tính bảng và không có kiểu máy tính để bàn đi qua và ghi đè lên công cụ. Bạn có thể ẩn / hiển thị / các yếu tố vị trí theo yêu cầu chỉ dành cho thiết bị di động.

Nếu bạn thực sự cần thay đổi mã máy tính để làm cho nó hoạt động với thiết bị di động và máy tính để bàn, bạn có thể cấu trúc lại đánh dấu. Ngoài ra, nếu bạn thấy bạn không thể cấu trúc lại HTML một cách thực tế cho cả phiên bản đáp ứng và phiên bản di động, bạn có thể đặt một lớp trên mã máy tính để bàn, ví dụ như lớp "máy tính để bàn" và sử dụng CSS trong phiên bản di động để ẩn nó. Sau đó viết một số HTML mới cho phần đó và cung cấp cho nó a class="mobile". Sau đó, tạo kiểu cho phù hợp trong mobile.css và ẩn nó trong desktop.css .

— đèn chiếu sáng
nguồn

3

Tôi đã làm việc trên một trang web sử dụng phương pháp đó và tôi gặp vấn đề với xoay màn hình trên thiết bị di động. Vì JavaScript sẽ chỉ phát hiện một lần khi tải trang, nếu người dùng xoay thiết bị, nó sẽ không mở rộng ra toàn bộ chiều rộng theo cách truy vấn phương tiện. Lúc đó, việc chuyển sang CSS trở nên dễ dàng hơn, nhưng có lẽ một chuyên gia về JS sẽ biết liệu có cách nào để phát hiện sự thay đổi về chiều rộng khung nhìn hay không. Có vẻ như nên có một cách với AJAX nhưng tôi sẵn sàng đặt cược bất cứ điều gì bạn tìm thấy sẽ quá mức cần thiết cho đến khi hiệu suất hoạt động, như megasteve mô tả.

— dì ghẻ
nguồn

2

Phản hồi và "xuất hiện chính xác trên điện thoại thông minh" là hai nhiệm vụ hoàn toàn khác nhau.

Có lẽ, khả năng đáp ứng đề cập đến việc loại bỏ - khi có thể - các chuyến đi khứ hồi thêm đến máy chủ. Kiểm tra lỗi, Ajax để truy xuất dữ liệu được yêu cầu và thao tác DOM động là các tác vụ thường cải thiện khả năng phản hồi. Việc sử dụng JavaScript (hoặc khung JavaScript) là một cách hiệu quả để làm điều này. Trong vài năm qua tôi đã chuyển từ JavaScript sang jQuery để triển khai. Trong nhiều trường hợp, jQuery có khả năng tương thích trình duyệt tích hợp sẵn có những lợi thế rõ ràng. Các plugin cho datepicker, tự động hoàn thành và các menu tiết kiệm hàng giờ phát triển.

Nó không phải là nguồn chính của phong cách. Đó là công việc của CSS. Tuy nhiên, cả hai có thể được sử dụng cùng nhau một cách hiệu quả. Trong một ví dụ đơn giản, văn bản có thể được tạo kiểu khác nhau tùy thuộc vào kết quả của một số hành động. jQuery có thể được sử dụng để thay đổi lớp được định nghĩa CSS.

$('#result').removeClass('red').addClass('green');

Thật hấp dẫn khi thử sử dụng lại một trang tiêu chuẩn cho thiết bị di động bằng cách thay đổi linh hoạt kiểu dáng. Kinh nghiệm của tôi là nó cung cấp một giải pháp không đạt yêu cầu. CSS là hoàn toàn khác nhau và kịch bản phía máy khách khác nhau được yêu cầu để tận dụng các tính năng di động. Sở thích của tôi là tạo các trang HTML chuyên dụng riêng biệt thay vì một trang yêu cầu logic để chọn kiểu dáng hoặc chức năng sẽ được sử dụng.

— stephanie perry
nguồn

Người hỏi đã đề cập đến "Thiết kế web đáp ứng" ( en.wikipedia.org/wiki/Responsive_web_design ), trong đó đề cập đến việc thiết kế cho các kích thước và khả năng màn hình khác nhau. Mặc dù nó không dành riêng cho điện thoại, nhưng đây là một yếu tố rất lớn trong việc đưa kỹ thuật này lên hàng đầu.

— Jacob Hume

1

Chúng tôi đã từng sử dụng khung css phổ biến 960.gs cho các trang web của chúng tôi.

Chúng tôi muốn làm cho nó đáp ứng.

Ai đó đã tạo một plugin đáp ứng dựa trên JS cho 960 gs vì vậy chúng tôi nghĩ rằng tại sao không sử dụng nó vì chúng tôi sẽ không phải thực hiện bất kỳ thay đổi nào đối với các mẫu trang web cấu trúc.

Nó hoạt động nhưng bị lag trong hầu hết các trình duyệt kể cả những trình duyệt tốt. Thông thường, bạn sẽ nhận được 'flash nội dung không theo kiểu' sẽ thay đổi rất nhiều tùy thuộc vào độ phức tạp của trang.

Mặc dù các giải pháp JS hoạt động không thực sự lý tưởng, các truy vấn phương tiện CSS 3 là lựa chọn tốt nhất nếu có thể. Cuối cùng, chúng tôi đã thực hiện lại các mẫu trang web của mình bằng Twitter Bootstrap , rất phù hợp với nhu cầu của chúng tôi.

Mặc dù có thể rất tiếc khi thực hiện các biện pháp cắt ngắn, nhưng về lâu dài thường tốn nhiều thời gian / đau đớn hơn.

— megasteve4
nguồn