আমি শুনেছি আপনার স্টাইলশীটে পিক্সেলের পরিবর্তে মাপ এবং দূরত্বগুলি নির্ধারণ করা উচিত। সুতরাং প্রশ্নটি হল যখন সিএসএসে শৈলীর সংজ্ঞা দেওয়ার সময় আমি পিক্সের পরিবর্তে এম ব্যবহার করব কেন? এটির উদাহরণ দেয় এমন কোনও ভাল উদাহরণ আছে কি?
উত্তর:
এটি অন্যটির চেয়ে ভাল পছন্দ বলে বলা ভুল (বা উভয়কেই তাদের নিজস্ব উদ্দেশ্য দেওয়া হয়নি)। এমনকি এটি লক্ষণীয়ও হতে পারে যে স্ট্যাকওভারফ্লো px ইউনিটগুলির ব্যাপক ব্যবহার করে। স্পোইককে বলা হয়েছিল যে এটি পছন্দ নয়।
ইউনিট সংজ্ঞা
px আকারে (যেমন পরিমাপের একটি পরম একক মধ্যে , পর্তুগীজ ভাষায় , অথবা সেমি ) তাতে একটি এর 1/96 হতে হবে মধ্যে ইউনিট (কেন পরে আরো)। কারণ এটি একটি নিখুঁত পরিমাপ, আপনি যে কোনও সময় ব্রাউজার উইন্ডো বা ফন্টের আকার বা ফন্টের আকারের মতো আনুপাতিক হওয়ার চেয়ে কিছু নির্দিষ্ট আকার হিসাবে সংজ্ঞায়িত করতে চাইলে এটি ব্যবহার করা যেতে পারে।
অন্যান্য সমস্ত পরম ইউনিটগুলির মতো, পক্স ইউনিটগুলি ব্রাউজার উইন্ডোর প্রস্থ অনুযায়ী স্কেল করে না। সুতরাং, যদি আপনার পুরো পৃষ্ঠার নকশা % এর চেয়ে px এর মতো পরম ইউনিট ব্যবহার করে তবে এটি ব্রাউজারের প্রস্থের সাথে খাপ খায় না । এটি অন্তর্নিহিত ভাল বা খারাপ নয়, কেবলমাত্র একটি পছন্দ যা ডিজাইনারের একটি সঠিক আকারের সাথে আনতে এবং প্রসারিতের তুলনায় অবিচ্ছিন্ন হওয়া উচিত তবে প্রক্রিয়াটিতে একটি সঠিক আকারের সাথে মেনে চলতে হবে না। কোনও সাইটের ক্ষেত্রে স্থির আকারের এবং নমনীয় আকারের অবজেক্টগুলির মিশ্রণ থাকা সাধারণ হবে।
স্থির আকারের উপাদানগুলিকে প্রায়শই পৃষ্ঠাতে অন্তর্ভুক্ত করা প্রয়োজন - যেমন বিজ্ঞাপনের ব্যানার, লোগো বা আইকনগুলি। এটি আপনাকে প্রায় সর্বদা একটি ডিজাইনে কমপক্ষে কিছু পিএক্স-ভিত্তিক পরিমাপের প্রয়োজন তা নিশ্চিত করে । উদাহরণস্বরূপ, চিত্রগুলি (ডিফল্টরূপে) এমনভাবে মাপা হবে যাতে প্রতিটি পিক্সেল 1 * পিক্সেল * আকারের হয়, তাই আপনি যদি কোনও চিত্রের চারপাশে ডিজাইন করেন তবে আপনার পিক্স ইউনিট প্রয়োজন । এটি সুনির্দিষ্ট ফন্ট আকারের জন্য এবং সীমানা প্রস্থের জন্য খুব দরকারী, যেখানে বৃত্তাকার কারণে এটি বেশিরভাগ পর্দার জন্য px ইউনিট ব্যবহার করতে সর্বাধিক বোধ করে ।
সমস্ত পরম পরিমাপ কঠোরভাবে একে অপরের সাথে সম্পর্কিত; যে, 1in হয় সবসময় 96px , যেমনটা 1in হয় সবসময় 72pt । (মনে রাখবেন যে স্ক্রিন-ভিত্তিক মিডিয়া সম্পর্কে কথা বলার সময় 1in আসলে কখনই প্রকৃত কোনও ইঞ্চি হয় না)। সকল পরম পরিমাপ 96ppi একটি নামমাত্র পর্দার রেজল্যুশন এবং একটি ডেক্সটপ মনিটর একটি নামমাত্র দেখার দূরত্ব অনুমান, এবং এই ধরনের একটি পর্দায় এক পিক্সেল এক সমান হবে শারীরিক পর্দায় পিক্সেল এবং এক মধ্যে96 টি শারীরিক পিক্সেলের সমান হবে। স্ক্রিনগুলিতে যা পিক্সেল ঘনত্ব বা দেখার দূরত্ব উভয় ক্ষেত্রে উল্লেখযোগ্যভাবে পৃথক হয় বা ব্যবহারকারী যদি ব্রাউজারের জুম ফাংশনটি ব্যবহার করে পৃষ্ঠাটি জুম করেন তবে px আর প্রয়োজনীয়ভাবে শারীরিক পিক্সেলের সাথে সম্পর্কিত হবে না।
em কোনও পরম ইউনিট নয় - এটি এমন একক যা বর্তমানে নির্বাচিত ফন্টের আকারের সাথে সম্পর্কিত। যদি না আপনি নিজের ফন্টের আকারটিকে পরম ইউনিট (যেমন px বা pt ) দিয়ে সেট করে ফন্টের স্টাইলকে ওভাররাইড করে না ফেলে থাকেন তবে এটি ব্যবহারকারীর ব্রাউজার বা ওএসে ফন্টের পছন্দ দ্বারা প্রভাবিত হবে যদি সেগুলি তৈরি করে থাকে, সুতরাং এটির কোনও অর্থ হয় না আপনি দৈর্ঘ্যের একটি সাধারণ একক হিসাবে ব্যবহার করতে যেখানে আপনি বিশেষত এটি হরফ আকারের স্কেল হিসাবে স্কেল করতে চান except
যখন আপনি নির্দিষ্টভাবে বর্তমান ফন্টের আকারের উপর নির্ভর করতে কোনওটির আকার চান তখন ইম ব্যবহার করুন ।
% হ'ল প্যারেন্ট উপাদানগুলির দৈর্ঘ্য বা প্রস্থের তুলনায় এই ক্ষেত্রেও আপেক্ষিক ইউনিট। ডিজাইনের মোট প্রস্থের মতো জিনিসের জন্য তারা পিএক্স ইউনিটগুলির একটি ভাল বিকল্প যদি আপনার ডিজাইন তার আকার নির্ধারণের জন্য নির্দিষ্ট পিক্সেল আকারের উপর নির্ভর না করে।
আপনার ডিজাইনে % ইউনিট ব্যবহার করা আপনার নকশাকে স্ক্রিন / ডিভাইসের প্রস্থের সাথে খাপ খাইয়ে নিতে দেয়, যেখানে প্যাক্সের মতো পরম ইউনিট ব্যবহার করে না।
আমার কাছে একটি উচ্চ রেজোলিউশন সহ একটি ছোট ল্যাপটপ রয়েছে এবং স্কুইন্টিং ছাড়াই পড়তে সক্ষম হতে ফায়ারফক্সকে 120% পাঠ্য জুমে চালাতে হবে।
অনেক সাইটে এর সাথে সমস্যা আছে। লেআউটটি সমস্ত গার্ল্ড হয়ে যায়, বোতামগুলির পাঠ্য অর্ধেক কেটে যায় বা পুরোপুরি অদৃশ্য হয়ে যায়। এমনকি স্ট্যাকওভারফ্লো ডট কম এটিকে ভোগ করে:
উপরের বোতামগুলি এবং পৃষ্ঠা ট্যাবগুলি কীভাবে ওভারল্যাপ হয় তা নোট করুন। তারা যদি px এর পরিবর্তে Em ইউনিট ব্যবহার করত তবে সমস্যা হত না।
আমি এই প্রশ্নটি জিজ্ঞাসা করার কারণটি হ'ল আমি যখন সিএসএসে খুশি হ্যাক করছিলাম তখন এটি কীভাবে ব্যবহার করা যায় তা ভুলে গিয়েছিলাম। লোকেরা খেয়াল করেনি যে আমি প্রশ্নটি সাধারণ রেখেছি কারণ আমি প্রতি সেফের ফন্টগুলি আকার দেওয়ার বিষয়ে কথা বলছিলাম না। পৃষ্ঠায় প্রদত্ত যে কোনও ব্লক উপাদানের শৈলীর সংজ্ঞা কীভাবে দেওয়া যায় সে সম্পর্কে আমি আরও আগ্রহী ছিলাম ।
হিসাবে হেনরিক পল এবং অন্যদের নির্দিষ্ট ই.এম. ফন্ট সাইজ উপাদান ব্যবহার করা সমানুপাতিক। Px- এ ব্লক উপাদানগুলির উপর মাপ নির্ধারণ করা একটি সাধারণ অনুশীলন, তবে ব্রাউজারগুলিতে ফন্টগুলি আকার দিতে সাধারণত এই নকশাটি ভেঙে দেয়। ফন্ট আকার পরিবর্তন করা হচ্ছে সাধারণভাবে শর্টকাট কী এর মাধ্যমে সম্পন্ন করা হয় Ctrl+ + +বা Ctrl+ + -। সুতরাং একটি ভাল অনুশীলন এর পরিবর্তে Em এর ব্যবহার করা।
এখানে একটি উদাহরণস্বরূপ উদাহরণ। বলুন আমাদের একটি ডিভ-ট্যাগ রয়েছে যা আমরা একটি আড়ম্বরপূর্ণ তারিখ বাক্সে রূপান্তর করতে চাই, আমাদের এইচটিএমএল-কোড থাকতে পারে যা দেখতে এটির মতো দেখাচ্ছে:
<div class="date-box">
<p class="month">July</p>
<p class="day">4</p>
</div>একটি সাধারণ বাস্তবায়ন date-boxক্লাসের প্রস্থকে px এ সংজ্ঞায়িত করবে :
* { margin: 0; padding: 0; }
p.month { font-size: 10pt; }
p.day { font-size: 24pt; font-weight: bold; }
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 50px;
}তবে, আমরা যদি আমাদের ব্রাউজারে টেক্সট আকার করতে চাই তবে নকশাটি ভেঙে যাবে। পাঠ্যটি বাক্সের বাইরেও রক্তপাত করবে যা ফ্লডিন পয়েন্ট হিসাবে দেখানো হয়েছে এসওর ডিজাইনের সাথে প্রায় একই রকম । এটি কারণ বাক্সটি লক হওয়ার সাথে সাথে একই আকারের প্রস্থে থাকবে 50px।
পরিবর্তে একটি চতুর উপায়টি এর পরিবর্তে ইমের প্রস্থকে সংজ্ঞায়িত করা হয়:
div.date-box {
background-color: #DD2222;
font-family: Arial, sans-serif;
color: white;
width: 2.5em;
}
* { margin: 0; padding: 0; font-size: 10pt; }
// Initial width of date-box = 10 pt x 2.5 em = 25 pt
// Will also work if you used px instead of ptএইভাবে আপনার তারিখ-বাক্সে তরল নকশা রয়েছে, অর্থাৎ বাক্সটি তারিখের বাক্সের জন্য সংজ্ঞায়িত ফন্ট-আকারের অনুপাতে পাঠ্যের সাথে একসাথে আকার ধারণ করবে। এই উদাহরণে, ফন্ট-আকারটি *10pt হিসাবে সংজ্ঞায়িত করা হয় এবং এটি ফন্টের আকারের চেয়ে 2.5 গুণ বেশি হবে। সুতরাং আপনি যখন ব্রাউজারে ফন্টগুলি আকার দিচ্ছেন, বাক্সটি সেই ফন্টের আকারের 2.5 গুণ আকারের হবে।
Ctrl+এবং Ctrl-পিক্সেলের মানগুলিও স্কেল করবে। এটি কিছুক্ষণের জন্য এমন হয়েছে।
থোমস্রুটটার থেকে এখানে শীর্ষে দেওয়া উত্তর এম সম্পর্কে তার প্রতিক্রিয়ায় ঠিক । তবে পিক্সেলের আকার সম্পর্কে খুব ভুল। সুতরাং এটি পুরানো হলেও, আমি এটিকে অবুঝ হতে দিতে পারি না।
একটি কম্পিউটার স্ক্রিন সাধারণত 96dpi হয় না! (বা পিপিআই, আপনি যদি পেডেন্টিক হতে চান তবে)
একটি পিক্সেলের নির্দিষ্ট শারীরিক আকার থাকে না।
(হ্যাঁ, এটি কেবল একটি স্ক্রিনের মধ্যে স্থির করা হয়েছে , তবে পরবর্তী স্ক্রিনে একটি পিক্সেল সম্ভবত খুব বড়, বা ছোট এবং সম্ভবত এক ইঞ্চির 1/96 নয়))
প্রুফ
একটি লাইন আঁকুন, 960 পিক্সেল দীর্ঘ। এটি একটি শারীরিক শাসকের সাথে পরিমাপ করুন। এটা কি 10 ইঞ্চি? কোন ..?
আপনার ল্যাপটপটিকে আপনার টিভিতে সংযুক্ত করুন। লাইনটি এখন 10 ইঞ্চি? এখনও না?
আপনার আইফোনে লাইনটি দেখান। এখনও একই আকার? কেন না?
কে হেক 96dpi কম্পিউটার স্ক্রিন মিথের আবিষ্কার?
(কিছু ধর্ম 72dpi পুরাণ দিয়ে কাজ করে operate তবে সমানভাবে ভুল))
pxরয়েছেন তার পিক্সেল নয়, একটি রেফারেন্স পিক্সেলের তুলনায় আকারযুক্ত । আপনি এটি পছন্দ করতে পারেন না, তবে আপনার শাসককে বের করে দেওয়া এটিকে কোনও বাস্তবের তুলনায় কমিয়ে দেবে না বা এটি প্রশ্নের উত্তর দেওয়ার ক্ষেত্রে অবদান রাখবে না। stackoverflow.com/questions/27382331/… "The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees."
এটি ফন্টের আকার অনুসারে স্কেল করতে হয় এমন প্রতিটি কিছুর জন্য ব্যবহার।
এটি ব্রাউজারগুলিতে বিশেষভাবে কার্যকর যা ফন্টের আকারকে স্কেল করে জুম প্রয়োগ করে। সুতরাং আপনি যদি ব্যবহার করে আপনার সমস্ত উপাদান আকারem সেগুলি অনুযায়ী স্কেল ।
কারণ ইম ( http://en.wikedia.org/wiki/Em_(typography) বর্তমানে ব্যবহৃত ফন্টের আকারের সাথে সরাসরি সমানুপাতিক। যদি হরফ আকার হয়, বলুন, 16 পয়েন্ট, একটি ইমাম 16 পয়েন্ট। যদি আপনার ফন্টের আকার 16 পিক্সেল হয় ( দ্রষ্টব্য : পয়েন্ট হিসাবে একই নয়), একটি ইমেল 16 পিক্সেল।
এটি দুটি (সম্পর্কিত) জিনিস নিয়ে যায়:
2pxহয় 0.125emএকটি 16 পিক্সেল ফন্ট জন্য।
উদাহরণ:
কোড: বডি {ফন্ট-আকার: 10px;} // 10 টি নীচে সমস্ত আকারের নীচে রাখুন, এই মানটি পরিবর্তন করুন এবং বাকী পরিবর্তন যেমন এই মানের 1.4 হতে হবে
...
শরীর
1
2
3
4
5
শরীরে মান পরিবর্তন করে বিশ্রামটি স্বয়ংক্রিয়ভাবে এক ধরণের বেস ভ্যালু হয়ে যায় ...
10 × 2 = 20 10 × 1.6 = 16 ইত্যাদি
আপনি 8px হিসাবে বেস মান থাকতে পারে… সুতরাং 8 × 2 = 16 8 × 1.6 = 12.8 // ব্রাউজার দ্বারা গোল হতে পারে
খুব ব্যবহারিক কারণ হ'ল আইই 6 আপনাকে ফন্টটি পিএক্স ব্যবহার করে নির্দিষ্ট আকারে পরিবর্তন করতে দেয় না, যখন আপনি এম বা শতাংশের মতো আপেক্ষিক ইউনিট ব্যবহার করেন it ব্যবহারকারীকে ফন্টের আকার পরিবর্তন করতে না দেওয়া অ্যাক্সেসযোগ্যতার জন্য খুব খারাপ। যদিও এটি হ্রাসে রয়েছে, এখনও সেখানে অনেকগুলি আইআই 6 ব্যবহারকারী রয়েছেন।
Page > Text Size) নির্দিষ্ট করা ফন্টের আকারের সাহায্যে পাঠ্যকে পুনরায় আকার দিতে পারে না । তবে, আই 7 পৃষ্ঠাটি জুম যুক্ত করেছে ( Page > Zoom) যা স্পষ্টতই পাঠ্য সহ পুরো পৃষ্ঠাটি জুম করে।
গ্রাফিকাল উপাদানগুলির যথাযথ অবস্থানের জন্য px ব্যবহার করুন। লাইন-উচ্চতা ইত্যাদির মতো পাঠ্য উপাদানগুলির চারপাশে অবস্থান নির্ধারণ এবং ব্যবধানের পরিমাপের জন্য ইম ব্যবহার করুন
ইম বা শতাংশ ব্যবহারের মূল কারণ হ'ল নকশাটি ভঙ্গ না করে ব্যবহারকারীকে পাঠ্য আকার পরিবর্তন করতে দেওয়া। আপনি যদি px এ নির্দিষ্ট ফন্টগুলি দিয়ে নকশা করেন তবে ব্যবহারকারী যদি আকারের আকার বা বড় চয়ন করেন তবে তারা আকার (আই 6 6 এবং অন্যান্যতে) পরিবর্তন করবেন না । এটি ভিজ্যুয়াল প্রতিবন্ধকতা সহ ব্যবহারকারীদের পক্ষে খুব খারাপ।
এর মতো নকশাগুলির উপর বেশ কয়েকটি উদাহরণ এবং নিবন্ধগুলির জন্য (এটি চয়ন করার জন্য অগণিত রয়েছে), এ তালিকার পাশাপাশি সর্বশেষ সংখ্যাটি দেখুন: ফ্লুয়েড গ্রিডস , পুরানো নিবন্ধটি সিএসএসে বা ড্যান সিডারহোলমের বুলেটপ্রুফ ওয়েব ডিজাইনে কীভাবে পাঠ্য মাপবেন ।
আপনার চিত্রগুলি এখনও পিক্সের আকারের সাথে প্রদর্শিত হওয়া উচিত, তবে সাধারণভাবে, এটি আপনার পাঠ্যকে পিক্সের সাথে আকার দিতে ভাল ফর্ম হিসাবে বিবেচিত হয় না।
আমি ব্যক্তিগতভাবে আই 6-কে ঘৃণা করি, বর্তমানে এটি আমাদের ফরচুন 200 কোম্পানির বেশিরভাগ ব্যবহারকারীদের জন্য অনুমোদিত একমাত্র ব্রাউজার।
ফন্টের আকার নির্দিষ্ট করতে আপনি px ব্যবহার করতে চান তবে একটি সহজ সমাধান রয়েছে, তবে এটি আপনার সিএসএস ফাইলে রেখে এগুলি সরবরাহ করে এমন ব্যবহারযোগ্যতাটি চান:
body {
font-size: 62.5%;
}এবার আপনাকে p(এবং অন্যান্য) ট্যাগগুলি নির্দিষ্ট করুন :
p {
font-size: 0.8em; /* This is equal to 8px */
font-size: 1.0em; /* This is equal to 10px */
font-size: 1.2em; /* This is equal to 12px */
font-size: 2.0em; /* This is equal to 20px */
}ইত্যাদি।
font-size: 10px। css-tricks.com/forums/discussion/1230/…
পিক্সেল একটি পরম ইউনিট যেখানে রেম / ইমগুলি আপেক্ষিক ইউনিট। আরও তথ্যের জন্য: https://drafts.csswg.org/css-values-3/
সিস্টেমের ফন্টের আকার অনুসারে হরফ-আকারটি অভিযোজিত হতে চাইলে আপেক্ষিক ইউনিটটি ব্যবহার করা উচিত কারণ সিস্টেমটি মূল উপাদানটিতে ফন্ট-আকারের মান সরবরাহ করে যা এইচটিএমএল উপাদান।
এই ক্ষেত্রে, যেখানে ওয়েবপৃষ্ঠাটি গুগল ক্রোমে খোলা আছে, HTML উপাদানটির ফন্ট-আকার ক্রোম দ্বারা সেট করা আছে, রিম / ইম ইউনিটগুলির ফন্টগুলির সাথে ওয়েবপৃষ্ঠাগুলিতে প্রভাব দেখতে এটি পরিবর্তন করার চেষ্টা করুন।
আপনি যদি pxহরফগুলির জন্য ইউনিট হিসাবে ব্যবহার করেন তবে হরফ rem/em যখন আপনি সিস্টেমের ফন্টের আকার পরিবর্তন করার ইউনিট আকার পরিবর্তন হবে will
সুতরাং pxআপনি যখন আকারটি স্থির করতে চান এবং ব্যবহার করুন rem/ emআপনি যখন আকারটি সিস্টেমের আকারের সাথে অভিযোজিত / গতিশীল হতে চান তখন ব্যবহার করুন ।
সাধারণ sensক্যমত্য হ'ল ফন্ট সাইজিংয়ের জন্য শতাংশ ব্যবহার করা, কারণ এটি ব্রাউজার / প্ল্যাটফর্মগুলিতে আরও সুসংগত।
যদিও এটি মজার, আমি সবসময় ফন্ট আকারের জন্য পিটি ব্যবহার করতাম এবং আমি ধরে নিলাম যে সমস্ত সাইট এটি ব্যবহার করেছে। আপনি সাধারণত অন্যান্য অ্যাপ্লিকেশনগুলিতে px মাপ ব্যবহার করেন না (যেমন ওয়ার্ড)। আমার ধারণা এটি এর কারণ এটি মুদ্রণের জন্য - তবে আকারটি ওয়েব ব্রাউজারে ওয়ার্ডের মতোই ...
এর পরিবর্তে Em বা px ব্যবহার রেম এড়িয়ে চলুন গণনা করা মানটি খুঁজে পাওয়া তার আরও সহজ কারণ। তবে Em এবং px এর মধ্যে, px আরও ভাল কারণ Em ডিবাগ করা শক্ত।
