সিএসএসে হরফ আকার -% বা ইম?


112

সিএসএসে ফন্টের আকার নির্ধারণের সময়, আমি কি শতাংশের মান ( %) ব্যবহার করব em? আপনি সুবিধা ব্যাখ্যা করতে পারেন?


1
আমার মতে ২০১ 2016 সালে এম এবং% এর মধ্যে কোনও পার্থক্য নেই। আমি ইনপুট 1.2 ই.এম. সব আধুনিক ব্রাউজারে মনে করে আমি 120% ব্যবহৃত হয়েছে এবং উদাহরণস্বরূপ যদি আমি 0.7 ই.এম. সব আধুনিক ব্রাউজারে মনে করে আমি 70% ব্যবহার করেছেন ব্যবহার করেন তাহলে ... এই আমি সিএসএস কি অভিজ্ঞতা আছে হয়
মাহদি Jazini

উত্তর:


79

এ তালিকার বাইরেও ওয়েব টাইপোগ্রাফিতে সত্যিই একটি ভাল নিবন্ধ রয়েছে ।

তাদের উপসংহার:

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


29
আসলে কোন ইউনিট ছাড়াline-heights আরও ভাল লেখা হয়। এটি অনুমানের দ্বারা অনুমোদিত হয় এবং এটি কিছুটা সত্যই বিরক্তিকর ব্রাউজারের স্পর্শগুলি এড়িয়ে যায় যখন এটি ভিত্তিক লাইন-উচ্চতায় আসেem
মার আর্লিগসন

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

5
@ মোহাগ ৫১৯ এঁকে বাসা বাঁধাই একটি বিপজ্জনক ফাঁদ। :)
বিষ্ণুদেব কে

@ মোহাগ ৫১৯ পিক্সেল আপনাকে উচ্চতর পিক্সেল ঘনত্বযুক্ত মোবাইল ডিভাইসগুলির সাথে লক্ষ্যযুক্ত তুলনায় অনেক ছোট কিছু দিচ্ছে না? আমি মনে করি না যে আমরা আমাদের সাইটগুলি ডেস্কটপের মতো
হ'ল তবে

@ jhnb003 এই জাতীয় মোবাইল ডিভাইসে একটি ডিভাইস পিক্সেল অনুপাতের চেয়ে বড় থাকে 1। উদাহরণস্বরূপ আইফোন 4 এর দৈহিক স্ক্রিনের প্রস্থ 640px রয়েছে তবে 320 "সিএসএস" পিক্সেল (ডিপিআর = 2) হিসাবে প্রদর্শিত হবে। ওয়েবসাইটটি আর ছোট দেখা যায় না!
বেনিয়ামিন

14

Http://archivist.incutio.com/viewlist/css-discuss/1408 থেকে

%: কিছু ব্রাউজার ফন্ট-আকারের শতাংশ হ্যান্ডেল করে না তবে 150% কে 150px হিসাবে ব্যাখ্যা করে। (উদাহরণস্বরূপ কয়েকটি এনএন 4 সংস্করণ।) নেস্টেড উপাদানগুলির শতাংশের সাথেও IE সমস্যা রয়েছে। দেখে মনে হচ্ছে IE প্যারেন্ট এলিমেন্টের তুলনায় ভিউপোর্টের তুলনায় শতকরা তুলনামূলকভাবে ব্যবহার করে। তবুও আরেকটি সমস্যা (যদিও ডাব্লু 3 সি স্পেস অনুসারে সঠিক) মোজ / এনএস 6 এ আপনি নির্দিষ্ট নির্দিষ্ট উচ্চতা / প্রস্থ সহ উপাদানগুলির সাথে শতাংশের তুলনায় ব্যবহার করতে পারবেন না।

ইম: কখনও কখনও ব্রাউজারগুলি ভুল রেফারেন্স আকার ব্যবহার করে তবে আপেক্ষিক ইউনিটগুলির মধ্যে এটিই সবচেয়ে কম সমস্যাযুক্ত। আপনি এটি px হিসাবে ব্যাখ্যা হতে পারে কখনও কখনও যদিও।

pt: রেজোলিউশনের মধ্যে ব্যাপক পার্থক্য রয়েছে এবং এটি প্রদর্শনের জন্য ব্যবহার করা উচিত নয়। এটি মুদ্রণ ব্যবহারের জন্য যদিও বেশ নিরাপদ।

px: পর্দার একমাত্র নির্ভরযোগ্য পরম ইউনিট। এটি মুদ্রণের ক্ষেত্রে ভুলভাবে ব্যাখ্যা করা যেতে পারে, যেমন একটি পয়েন্ট সাধারণত বেশ কয়েকটি পিক্সেল নিয়ে থাকে এবং তাই সবকিছু হাস্যকরভাবে ছোট হয়ে যায়।


পিটি জিনিস সম্পর্কে। আমার উপর / এ নিয়ে দুর্দান্ত তর্ক হয়েছিল। যে সম্পর্কে (এবং হারিয়ে) আপনার মত আমারও একই দৃষ্টিভঙ্গি ছিল, কেউ এই
পোভকে

12
আপনি কি সত্যিই বলছেন যে কিছু নেটস্কেপ নেভিগেটর 4 ব্যবহারকারী যদি আমি ফন্টের আকারের জন্য শতাংশ ব্যবহার করতে পারি তবে আমার পৃষ্ঠাটি সঠিকভাবে দেখতে সক্ষম হবে না?
নবাগত

4
উদ্ধৃত আলোচনা ২০০২ সালের। এটি কি এখনও প্রাসঙ্গিক? Em বা% বাগ সহ সক্রিয় ব্যবহারে কোনও ব্রাউজার রয়েছে?
বেনি চেরনিয়াভস্কি-পাসকিন

1
ব্রাউজারগুলিতে 20 বছরের পুরানো বাগ উদ্ধৃত করা কোনও কার্যকর উত্তর নয়।
d512

7

উভয়ই হ'ল এটি হ'ল ফন্টের আকারের তুলনায়। 1.5 মিমি 150% এর সমান। একমাত্র সুবিধাটি পঠনযোগ্যতা বলে মনে হচ্ছে, আপনি যে কোনওটিতে সবচেয়ে বেশি স্বাচ্ছন্দ্যযুক্ত তা চয়ন করুন।


কেউ কেন আমাকে ভোট দিচ্ছে তা বোঝাতে পারেন? আমি এবং পার্সেন্টের মধ্যে পার্থক্য বুঝতে পেরেছিলাম ঠিক এইভাবে। একের পর এক ব্যবহার করার আজকাল কোনও সুবিধা নেই। গুরুত্বপূর্ণ বিষয়টি হ'ল আপনি এমন একটি আকার ব্যবহার করেন যা একটি বেস ফন্টের আকারের সাথে সম্পর্কিত।
লি থোবাল্ড

1
থ্যাঙ্কস লি, আমি উইন্ডোজ-এ সমস্ত সবেমাত্র আই 6, আই 7, ফায়ারফক্স 3, সাফারি 3, অপেরা 9.5 এবং গুগল ক্রোমে পরীক্ষা করেছি এবং তারা সবাই আমার কাছে এক রকম বলে মনে হয়! <p শৈলী = "হরফ-আকার: 0.6 ম;"> এটি একটি পরীক্ষা </ p> <p স্টাইল = "ফন্ট-আকার: 60%;"> এটি একটি পরীক্ষা </ p>
লিয়াম

7

আসল পার্থক্যটি তখন প্রকাশিত হয় যখন আপনি এটিকে ফন্ট-আকারের জন্য ব্যবহার করবেন না। একটি সেটিং paddingএর 1emহিসাবে একই নয় 100%emসবসময় ফন্ট-আকারের সাথে সম্পর্কিত। তবে %ফন্টের আকার, প্রস্থ, উচ্চতা এবং সম্ভবত এমন কিছু অন্যান্য জিনিসগুলির সাথে সম্পর্কিত হতে পারে যা আমি জানি না।


5

প্রদত্ত (প্রায়?) সমস্ত ব্রাউজারগুলি এখন কেবলমাত্র পাঠ্যের পরিবর্তে পুরো পৃষ্ঠাকে আকার পরিবর্তন করতে পারে, অ্যাক্সেসযোগ্য ফন্টের পুনরায় আকার দেওয়ার ক্ষেত্রে pxবনাম %বনাম emএর সাথে সম্পর্কিত পূর্ববর্তী সমস্যাগুলি বরং মোটা হয়ে যায়।

সুতরাং, উত্তরটি সম্ভবত এটি কোনও ব্যাপার নয় doesn't আপনার জন্য যা কাজ করে তা ব্যবহার করুন।

% এটি দুর্দান্ত কারণ এটি আপেক্ষিক আকার পরিবর্তন করতে দেয়।

px দুর্দান্ত কারণ এটি ব্যবহার করার সময় প্রত্যাশাগুলি পরিচালনা করা মোটামুটি সহজ।

em লেআউট উপাদানগুলির ক্ষেত্রেও এটি কার্যকর হতে পারে কারণ এটি পাঠ্যের আকারের সাথে আনুপাতিক আকার নির্ধারণের অনুমতি দিতে পারে।


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

@ ভাল, নোট করুন যে এই উত্তরটি 8 বছরের পুরানো। এটি ইন্টারনেট সময়ে একটি দীর্ঘ সময়। এটি বলেছিল, পিক্সেলগুলি আদর্শ না হলে এখনও ঠিক আছে। বেশিরভাগ (সমস্ত?) ব্রাউজারগুলি নির্দিষ্ট ডিভাইসে পর্যাপ্ত পরিমাণে পিক্সেল ফন্টের আকার দিতে পারে। আজ, যদিও আমি সাধারণত আমার পরিমাপের একক হিসাবে রিম ব্যবহার করব।
ডিএ

হতে পারে আমি কিছু মিস করছি, তবে পিক্সেল দৈর্ঘ্যের সাথে যদি কারওর কি হয়? কেন তারা "ভাল" বা "আদর্শ"? ভারসাস em, উদাহরণস্বরূপ। এর থেকেও, আমি মনে করি এসও-তে উত্তরগুলি সময়হীন হওয়ার চেষ্টা করা উচিত - এটি সর্বোপরি একটি জ্ঞানের ভিত্তি। প্রোগ্রামিংয়ের উইকিপিডিয়া :) উইকিপিডিয়া যেমন তথ্য প্রতিফলিত করার জন্য আপডেট করা হয়, তেমনি আমার নম্র মতেরও উত্তর দেওয়া উচিত।
এএমএন

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

0

সিএসএস ইউনিট %এবং এর মধ্যে পার্থক্য সম্পর্কে em

আমি যতদূর বুঝতে পেরেছি (কমপক্ষে তাত্ত্বিক / ধারণাগতভাবে, তবে সম্ভবত ব্রাউজারগুলিতে এই দুটি ইউনিট কীভাবে প্রয়োগ করা যেতে পারে) এই দুটি ইউনিট সমতুল্য, অর্থাৎ আপনি যদি নিজের emমানটির সাথে গুন করেন 100এবং তার সাথে প্রতিস্থাপন emকরেন %তবে একই জিনিস হওয়া উচিত?

যদি সত্যিই ইম এবং% এর মধ্যে কিছু বাস্তব পার্থক্য থাকে তবে কেউ কি এটি ব্যাখ্যা করতে পারে (বা ব্যাখ্যাটির একটি লিঙ্ক সরবরাহ করতে পারে)?

(আমি আমার এই মন্তব্যটি কোথায় যুক্ত করব তা যুক্ত করতে চেয়েছিলাম, অর্থাত্ উত্তরটির ঠিক নীচে ইন্টেন্ট করা, "Liam, answered Sep 25 '08 at 11:21"যেহেতু আমিও জানতে চেয়েছিলাম কেন তার উত্তরটি নিম্নচালিত হয়েছিল, তবে আমি কীভাবে আমার মন্তব্যটি এখানে রাখতে পারি তা বুঝতে পারি না এবং তাই লিখতে হয়েছিল এই "থ্রেড গ্লোবাল" উত্তর)


-1

গ্যালিশিয়ান যেমন উল্লেখ করেছেন, ওয়েব টাইপোগ্রাফির জন্য px সবচেয়ে নির্ভরযোগ্য, কারণ আপনি পৃষ্ঠায় যা কিছু করেন তা বেশিরভাগই কম্পিউটার মনিটরের রেফারেন্সে দেওয়া হয়। পরম আকারের সমস্যাটি হ'ল কিছু ব্রাউজার কোনও ওয়েব-পৃষ্ঠায় পিক্সেল-মান উপাদান স্কেল করে না, সুতরাং আপনি যখন জুম / আউট / আউট করার চেষ্টা করবেন তখন সমস্ত উপাদানগুলি বাদ দিয়ে সামঞ্জস্য হয়।

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


1
আই 7 p পিক্সেল-মানগুলি স্কেল করে যদি আপনি জুম ব্যবহার করেন। আই 6 এর জুম ছিল না, কেবল পাঠ্য-আকার। পাঠ্য আকারের পরিবর্তনের সাথে পৃষ্ঠাটিকে পুনরায় সজ্জিত করার পরিবর্তে স্থির পিক্সেল স্কেলগুলি ব্যবহার করেছিলেন এমন ডিজাইনারদের কারণে জুম একটি প্রয়োজনীয়তা হয়ে দাঁড়িয়েছিল।
মাইক ডিমমিক

এটি এখনও আই 6 এর সাথে একটি ইস্যু, তবে, আবারও সমস্ত কিছু এখনও আই 6 এর সাথে একটি সমস্যা। যদিও এর আগে আমি পিএক্সকে এড়িয়ে গিয়েছিলাম, ওয়েব পেজটি সম্পূর্ণরূপে জুম করার ধারণাটি (বনাম জেসুট টেক্সট) স্ট্যান্ডার্ড হয়ে গেছে এবং আমি নিজেকে আরও অনেকবার পিক্স ব্যবহার করতে দেখেছি।
ডিএ

-1

ইয়াহু ইউজার ইন্টারফেস লাইব্রেরি ( http://developer.yahoo.com/yui/ ) ব্রাউজার নির্দিষ্ট সেটিংস "রিসেট" করতে ব্যবহৃত বেস সিএসএস ক্লাসগুলির একটি দুর্দান্ত সেট রয়েছে যাতে সাইটটি প্রদর্শনের ভিত্তি সকলের জন্য সমান হয় (সমর্থিত) ব্রাউজার।

YUI এর সাথে একজনের শতাংশ শতাংশ ব্যবহার করার কথা।


আমি YUI রিসেটটি ব্যবহার করছি, তবে তখন বুঝতে পেরেছি যে ব্রাউজারগুলি পাঠ্য-আকারের সেটিংস কাজ করে না! পাঠ্য-আকারের সেটিংস ভাঙ্গার পরে আপনার যদি শরীরের উপর px সেট থাকে তবে% ব্যবহারের কোনও বিন্দু দেখতে পাবেন না।
জেসন
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.