প্রতিক্রিয়াশীল ওয়েব ডিজাইনের জন্য jQuery ব্যবহার করা কি ঠিক আছে?

11

কোনও সাইটকে প্রতিক্রিয়াশীল করে তুলতে এবং স্মার্ট ফোনে সঠিকভাবে উপস্থিত হওয়ার জন্য আমাকে আপডেট করার জন্য আমাকে দায়িত্ব দেওয়া হয়েছে। দুর্ভাগ্যক্রমে, এটির বর্তমান ফর্মের সাইটটি কাজ করা খুব সহজ নয় - আমি কেবল সিএসএস পরিবর্তন করতে পারি না।

ব্রাউজারের আকার সনাক্ত করা এবং jQuery দিয়ে CSS পরিবর্তন করা কি খারাপ বলে বিবেচিত হয়?

উদাহরণ:

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

— MeltingDog
সূত্র

7

পরিবর্তে আপনার মিডিয়া প্রশ্নগুলি ব্যবহার করা বিবেচনা করা উচিত কারণ এটি জুন ২০১২ সাল থেকে

— ডাব্লু

আপনি স্টাইল শীট পরিবর্তন মানে? আমি এটিও ভেবেছিলাম, তবে আমার এখনও অনেকগুলি উপাদান পরিবর্তন করতে হবে

— মেল্টিংডগ

হ্যাঁ. যাই হোক না কেন, আমি মনে করি আপনার অনেকগুলি সিএসএস পরিবর্তন হবে।

— জিস্টোলোইন

2

"আমাকে কোনও সাইটকে প্রতিক্রিয়াশীল করার জন্য আপডেট করার জন্য" আমাকে এই বাক্যটি "আমি কেবল সিএসএস পরিবর্তন করতে পারি না"

— ফ্রান্সিসকো প্রেসেনসিয়া

4

সবকিছুর জন্য আরও jQuery প্রয়োজন ( দাবি

— অস্বীকার:

13

অবশ্যই। স্পষ্টতই, একা সিএসএস ব্যবহার করা ভাল তবে আপনি যদি না পারেন তবে আপনার যা আছে তা ব্যবহার করুন। সিএসএস দিয়ে যতটা সম্ভব আপনারা করুন এবং প্রয়োজন মতো জেএস ব্যবহার করুন। আপনি কেন বিদ্যমান সিএসএস পরিবর্তন করতে পারবেন না তা নিশ্চিত নন তবে আপনি জেএস সহ একটি স্টাইল শীট যুক্ত করতে পারেন।

(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);
})();

সূত্র: http://christian-fei.com/add-stylesheets- after-the-head- using-javascript/

তারপরে CSS / মিডিয়া প্রশ্নের সাথে বাদাম যান go

বা jQuery সহ:

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

আমি প্রতিক্রিয়াশীল 'স্কিনস' করেছি যেখানে কিছু ডিওএম পরিবর্তন না করে কেবল সম্ভব ছিল না। যদি আপনার এইচটিএমএল অ্যাক্সেস না থাকে তবে জেএস ডোম হেরফের কখনও কখনও একমাত্র উত্তর।

সম্পাদনা:
আপনার ছোট পর্দার সংস্করণটির ভিজ্যুয়াল প্রয়োজনীয়তার উপর নির্ভর করে আপনি এই সিএসএস স্নিপেটটি 'মোবাইল বান্ধব' করার পথে আপনাকে কতটা দূরে সরিয়ে নেবে তা নিয়ে আপনি অবাক হয়ে যেতে পারেন।

/* 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; 
}

যদি মূল সিএসএস বিকাশকারী অত্যধিক পছন্দ করে !importantএবং আপনি এইচটিএমএল না পেতে পারেন তবে আপনি বডি বা উচ্চ স্তরের ধারকটিতে একটি আইডি যুক্ত করতে jQuery / JS ব্যবহার করতে পারেন এবং এটি আপনার নির্বাচককে যুক্ত করতে পারেন।

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

— ইচ্ছাশক্তি
সূত্র

আমার অভিজ্ঞতা থেকে প্রতিক্রিয়াশীল ডিজাইনটি কেবল CSS এর মাধ্যমে করা যেতে পারে। আপনার নকশাকেও অভিযোজিত হওয়ার সাথে সাথে আপনার সম্ভবত কিছু জাভাস্ক্রিপ্টও প্রয়োজন। মনে রাখবেন আপনি জাভাস্ক্রিপ্ট যতটা সম্ভব ন্যূনতম রাখতে চান।

— মার্কো

4

আমি বলব আগে মিডিয়া ক্যোয়ারী ব্যবহার করে দেখুন। মূলত কেবলমাত্র ডেস্কটপের জন্য ডিজাইনের সাথে কাজ করার সময় আমি একটি পদ্ধতিটি সহজ পেয়েছি:

দুটি পৃথক স্টাইলশিট দিয়ে শুরু করুন। একটি নতুন প্রতিক্রিয়াশীল ডিজাইনের জন্য এবং অন্যটি পুরানো ডেস্কটপ সংস্করণের জন্য:

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

সমস্ত পুরানো শৈলী ডেস্কটপ । CSS এ থাকতে পারে । ইতিমধ্যে আপনি মোবাইল সিএসএসে স্ক্র্যাচ থেকে শুরু করতে পারেন । আপনি সেই মোবাইল সিএসএসে একটি দুর্দান্ত একক কলাম লেআউট তৈরি করতে পারেন যা ট্যাবলেটগুলির জন্যও কাজ করে।

এই পদ্ধতির সাহায্যে আপনাকে নতুন করে শুরু করতে দেওয়া যায় এবং আপনি কেবল মোবাইল এবং ট্যাবলেটগুলির জন্য বিশেষভাবে স্টাইল করতে পারেন এবং ডেস্কটপ স্টাইলগুলি স্ট্রিংয়ের উপর দিয়ে আসা বা ওভাররাইডিংয়ের জন্য নাও থাকতে পারে। আপনি কেবল মোবাইলের জন্য প্রয়োজনীয় উপাদানগুলি গোপন / প্রদর্শন / অবস্থানের উপাদানগুলি রাখতে পারেন।

আপনার যদি ডেস্কটপ কোডটি মোবাইল এবং ডেস্কটপ দিয়ে কাজ করার জন্য সত্যই পরিবর্তন করতে হয় তবে আপনি মার্কআপটি রিফ্যাক্টর করতে পারেন। বিকল্প হিসাবে যদি আপনি খুঁজে পান যে আপনি প্রতিক্রিয়াশীল এবং মোবাইল উভয় সংস্করণের জন্য এইচটিএমএলকে বাস্তবের সাথে সংশোধন করতে পারবেন না তবে আপনি ডেস্কটপ কোডে ক্লাস রাখতে পারেন যেমন ক্লাস "ডেস্কটপ" এবং এটি লুকানোর জন্য মোবাইল সংস্করণে সিএসএস ব্যবহার করতে পারেন। তারপরে সেই বিভাগের জন্য কিছু নতুন এইচটিএমএল লিখুন এবং এটিকে একটি দিন class="mobile"। তারপরে এটি মোবাইল কোডে সে অনুযায়ী স্টাইল করুন এবং ডেস্কটপ । CSS এ লুকান ।

— lightspeeder
সূত্র

3

আমি এমন কোনও সাইটে কাজ করেছি যা সেই পদ্ধতিটি ব্যবহার করেছিল এবং মোবাইল ডিভাইসে স্ক্রিন রোটেশন নিয়ে আমার সমস্যা ছিল। যেহেতু জাভাস্ক্রিপ্ট কেবল একবার পৃষ্ঠা লোডে সনাক্ত করবে, ব্যবহারকারী যদি ডিভাইসটি ঘোরান তবে এটি মিডিয়া অনুসন্ধানগুলির সাথে পুরো প্রস্থে প্রসারিত হবে না। তখন কেবল সিএসএসে স্যুইচ করা আমার পক্ষে সহজ ছিল, তবে সম্ভবত কোনও জেএস বিশেষজ্ঞ জানতেন ভিউপোর্টের প্রস্থে কোনও পরিবর্তন সনাক্ত করার কোনও উপায় আছে কিনা। দেখে মনে হচ্ছে যেন এজেএক্সের সাথে কোনও পথ থাকা উচিত তবে আমি যে কোনও কিছুতেই বাজি দিতে রাজি হব যতটা পারফরম্যান্স যতটা না পেরে যায়, যেমন মেগাসেটিভ বর্ণনা করে।

— স্টেফানি
সূত্র

2

প্রতিক্রিয়াশীলতা এবং "স্মার্ট ফোনে সঠিকভাবে উপস্থিত হওয়া" সম্পূর্ণ ভিন্ন কাজ।

সম্ভবত, প্রতিক্রিয়াশীলতা - যেখানে সম্ভব - সার্ভারে অতিরিক্ত রাউন্ড ট্রিপগুলি মুছে ফেলা বোঝায়। ত্রুটি পরীক্ষা করার সময়, অনুরোধ করা ডেটা পুনরুদ্ধার করতে অ্যাজাক্স এবং গতিশীল ডিওএম ম্যানিপুলেশন হল সেই কাজগুলি যা সাধারণত প্রতিক্রিয়াশীলতা উন্নত করে। জাভাস্ক্রিপ্ট (বা জাভাস্ক্রিপ্ট ফ্রেমওয়ার্ক) এর ব্যবহার এটি কার্যকর উপায়। গত কয়েক বছর ধরে আমি জাভাস্ক্রিপ্ট থেকে এই বাস্তবায়নের জন্য jQuery এ চলে এসেছি। অনেক ক্ষেত্রে jQuery এর অন্তর্নির্মিত ব্রাউজারের সামঞ্জস্য রয়েছে যার সুস্পষ্ট সুবিধা রয়েছে। ডেটপিকার, স্বয়ংক্রিয়রূপে এবং মেনুগুলির জন্য প্লাগইনগুলি বিকাশের কয়েক ঘন্টা বাঁচায়।

এটি স্টাইলিংয়ের মূল উত্স হওয়া উচিত নয়। এটি সিএসএসের কাজ। তবে দুটি কার্যকরভাবে একসাথে ব্যবহার করা যেতে পারে। একটি সাধারণ উদাহরণে, কিছু ক্রিয়াকলাপের ফলাফলের উপর নির্ভর করে পাঠ্যটি আলাদাভাবে স্টাইল করা যেতে পারে। jQuery সিএসএস সংজ্ঞায়িত শ্রেণি পরিবর্তন করতে ব্যবহার করা যেতে পারে।

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

স্টাইল পরিবর্তন করে মোবাইলের জন্য একটি স্ট্যান্ডার্ড পৃষ্ঠাটি পুনরায় ব্যবহার করার চেষ্টা করা লোভনীয়। আমার অভিজ্ঞতা হ'ল এটি একটি অসন্তুষ্ট সমাধান সরবরাহ করে। সিএসএস সম্পূর্ণ আলাদা এবং মোবাইল বৈশিষ্ট্যগুলির সুবিধা নিতে আলাদা ক্লায়েন্টের সাইড স্ক্রিপ্টিং প্রয়োজন। আমার পছন্দ হ'ল স্টাইলিং বা ফাংশনগুলি ব্যবহার করার জন্য যুক্তির প্রয়োজন এমন একটি পৃষ্ঠার পরিবর্তে পৃথক ডেডিকেটেড এইচটিএমএল পৃষ্ঠাগুলি তৈরি করা।

— স্টেফানি পেরি
সূত্র

প্রশ্নকারী "প্রতিক্রিয়াশীল ওয়েব ডিজাইন" ( en.wikedia.org/wiki/Responsive_web_design ) উল্লেখ করেছেন, যা বিভিন্ন স্ক্রিনের আকার এবং সক্ষমতার জন্য নকশাকে বোঝায়। যদিও এটি ফোনের সাথে সুনির্দিষ্ট নয়, এই কৌশলটি সামনে এনে এটি একটি বিশাল কারণ।

— জ্যাকব হিউম

1

আমরা আমাদের সাইটের জন্য জনপ্রিয় 960.gs সিএসএস ফ্রেমওয়ার্ক ব্যবহার করতাম ।

আমরা এটি প্রতিক্রিয়াশীল করতে চেয়েছিলেন।

কেউ 960 জিএস-এর জন্য জেএস ভিত্তিক প্রতিক্রিয়াশীল প্লাগইন তৈরি করেছিল তাই আমরা ভেবেছিলাম খালি কেন এটি ব্যবহার করবেন না কারণ আমাদের কাঠামোগত সাইটের টেম্পলেটগুলিতে কোনও পরিবর্তন করতে হবে না।

এটি কাজ করেছে তবে বেশিরভাগ ব্রাউজারে ভাল রয়েছে la আপনি সাধারণত একটি 'আন-স্টাইলযুক্ত সামগ্রীর ফ্ল্যাশ' পাবেন যা পৃষ্ঠার জটিলতার উপর নির্ভর করে ব্যাপকভাবে পরিবর্তিত হবে।

জেএস সমাধানগুলি কাজ করেও তারা আদর্শ নয়, সিএসএস 3 মিডিয়া প্রশ্নগুলি সম্ভব হলে সেরা পছন্দ। শেষ পর্যন্ত আমরা কেবলমাত্র আমাদের সাইটের টেম্পলেটগুলি টুইটার বুটস্ট্র্যাপ ব্যবহার করে পুনরায় করেছি যা আমাদের প্রয়োজনের জন্য খুব ভাল।

যদিও এটি শর্ট কাটগুলি গ্রহণের পক্ষে অপসারণ হতে পারে এটি দীর্ঘসময় ধরে বেশি সময় গ্রহণ / বেদনাদায়ক হয়ে ওঠে।

— megasteve4
সূত্র