সিএসএস সহ ডিপি (ঘনত্বের স্বাধীন পিক্সেল) ইউনিট কী?

Question

অ্যান্ড্রয়েডের জন্য, লোকে ইউআই উপাদানগুলির জন্য ডিপি (ঘনত্বের স্বাধীন পিক্সেল) পরিমাপ ব্যবহার করার পরামর্শ দেয় এবং এমন কনভেনশন রয়েছে যেগুলি 48dpবোতামের উচ্চতার জন্য ব্যবহার ইত্যাদি exist

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

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

আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে পিক্সেল ঘনত্ব পেতে পারি এবং ম্যানুয়ালি সবকিছু যথাযথভাবে মাপতে পারি? এমন ওয়েব অ্যাপ তৈরির সর্বোত্তম উপায় কী যা সমস্ত রেজোলিউশন / ঘনত্বগুলিতে সুন্দরভাবে দেখায় এবং কাজ করে?

Comments

সিএসএস অ্যান্ড্রয়েডের pxমতোই dp। সিএসএস 3 অনুসারে। ইউনিট এবং মান উপর ।

— omninonsense

Answer 1

http://www.w3.org/TR/css3-values/# দৈর্ঘ্য

সিএসএসে সবচেয়ে কাছের ইউনিটটি ভিউপোর্ট-শতাংশ ইউনিট।

• vw - প্রাথমিক ধারণকারী ব্লকের প্রস্থের 1% এর সমান।
• vh - প্রাথমিক সমন্বিত ব্লকের উচ্চতার 1% এর সমান।
• vmin - vw বা vh এর ছোট সমান।
• ভিএমএক্স - ভিডাব্লু বা ভিএইচ এর বৃহত্তর সমান।

এই ইউনিটগুলি সমর্থন করে না এমন সচেতন একমাত্র মোবাইল ব্রাউজার হ'ল অপেরা। http://caniuse.com/#feat=viewport-units

Comments

আইওএস-এ মোতায়েনের সময় এই ইউনিটগুলি কি সঠিকভাবে প্রদর্শিত হয়?

— jmhostalet

@ জেএমহোস্টালেট না, ভিউপোর্টের উচ্চতা গতিশীল হওয়ার কারণে এটি ব্রাউজারটিকে এক ধরণের অসীম লুপে নিয়ে যায়।

— rookie1024

এই উত্তরটি ভুল, কারণ pxসিএসএস- এ ইউনিটটি ইতিমধ্যে পিক্সেল ঘনত্ব স্বাধীন - "একটি সিএসএস পিক্সেল একটি পিক্সেল নয়", এই সম্পর্কে প্রচুর নিবন্ধ রয়েছে

— চেজমস্কাল

Answer 2

আমি বর্তমানে গৃহীত উত্তরের সাথে একমত নই। যেমন uber5001 পরামর্শ দেয়, একটি pxএকটি নির্দিষ্ট ইউনিট, এবং অ্যান্ড্রয়েড-স্পেসিফিকের প্রচেষ্টার অনুরূপ মনোভাবের মধ্যে dp।

প্রতি উপাদান এর বৈশিষ্ট :

সিএসএস লেখার সময়, যেখানেই ডিপি বা এসপি বর্ণিত হয় px ব্যবহার করুন। অ্যান্ড্রয়েডের বিকাশে কেবলমাত্র ডিপি ব্যবহার করা দরকার।

অতিরিক্তভাবে

ওয়েবে ডিজাইন করার সময়, পিপিএক্স (পিক্সেলের জন্য) এর সাথে ডিপি প্রতিস্থাপন করুন।

Comments

এই উত্তর। উপাদান অনুমান উদ্ধৃত করার জন্য +1।

— কিউস - মোনিকা

এমডিএন থেকে: "ইউনিটটি স্ক্রিনে কোনও দৈহিক ইঞ্চির প্রতিনিধিত্ব করে না, তবে এটি 96px উপস্থাপন করে That এর অর্থ হ'ল আসল পর্দার পিক্সেল ঘনত্ব যাই হোক না কেন, এটি 96 ডিপিআই বলে ধরে নেওয়া হয় a আরও বেশি পিক্সেলের ঘনত্বযুক্ত ডিভাইসে, 1 ইন হবে 1 টি দৈহিক ইঞ্চির চেয়ে ছোট Similarly একইভাবে মিমি, সেমি এবং pt সম্পূর্ণ দৈর্ঘ্য নয় "" বিকাশকারী.মোজিলা.আর.ইন

— ডকস / ওয়েবে / সিএসএস/…

সিএসএস ইঞ্চি এবং শারীরিক ইঞ্চি 2 ভিন্ন জিনিস। 1 সিএসএস ইঞ্চি পর্দার ঘনত্ব নির্বিশেষে সর্বদা 96px থাকে। সুতরাং শুধুমাত্র একটি 96 ডিপিআই মনিটরে সিএসএস ইঞ্চি এবং শারীরিক ইঞ্চি সমান হিসাবে বিবেচনা করা যেতে পারে।

— ম্যাকিয়েজ ক্রাভজাইক

@ ম্যাসিজেক্রাভিজাইক পিএক্স-এর স্কেলের ভিন্নতা সম্পর্কে আপনার মতামতের ভিত্তিটি আমি বুঝতে পারি understand আমি কীভাবে একটি px প্রকৃতপক্ষে একটি নির্দিষ্ট ইউনিট, এবং আপনার যে স্কেলটি জড়িত তা এই বেস সত্যটি পরিবর্তন করে না, তবে এটি একটি লাল রঙের উত্তেজনা gue বাস্তবতা হ'ল মেটেরিয়াল স্পেসটি যেখানে ডাইপি প্রস্তাবিত সেখানে px ব্যবহার করতে সরাসরি বলে। প্রদত্ত ব্র্যাড অ্যান্ড্রয়েড ডিজাইনের মান সম্পর্কে জিজ্ঞাসা করেছিল, আমি প্রমিতটি সরবরাহ করেছিলাম এবং এইভাবে সঠিক, উত্তর দিয়েছি।

— Tohuw

সাম্প্রতিক আপডেট (মে 2018) উপাদান নকশা আরো গভীরতার মধ্যে পিক্সেল ঘনত্ব ব্যাখ্যা material.io/design/layout/#pixel-density

— squiggle

Answer 3

ব্যবহার rem।

এটি মূল উপাদানটির ফন্টের আকার এবং অন্যান্য ইউআই উপাদানগুলির আকারের জন্য খুব ভাল বেস ইউনিট।

যদি কেউ একই পরম আকার (সেন্টিমিটারে) ব্যবহার করে তবে পাঠ্য এবং অন্যান্য উপাদানগুলি মোবাইলে অনেক বড় বা ডেস্কটপে খুব ছোট হবে।

যদি কেউ একই পরিমাণ পিক্সেল ব্যবহার করে থাকে তবে পাঠ্য এবং অন্যান্য উপাদানগুলি মোবাইলে খুব ছোট বা ডেস্কটপে অনেক বড় হবে।

remকারণ এটা বলে ইউনিট ঘটনাস্থলেই হল "আরে, এটা কত বড় সাধারণ পাঠ্য হওয়া উচিত।" এটিতে অন্যান্য ইউআই উপাদানগুলির আকারকে হ্রাস করা একটি বেশ যুক্তিসঙ্গত পছন্দ।

Answer 4

সিএসএস 3-তে এটি বলা আরও সঠিক হতে পারে যে ওয়েবে অ্যান্ড্রয়েড নেই px। সিএসএস 3 এর জন্য এই বৈশিষ্ট্যটিpx বলে:

পিক্সেল; 1px 1in এর 1/96 তম সমান

px ভবিষ্যতে আপনি যে পরিমাপটি চান তা হতে পারে।

Comments

আমি সবকিছু দেখতে না পেয়ে এই রূপান্তরটি কীভাবে ঘটবে তা আমি দেখতে পাচ্ছি না। এবং একই জন্য পরম আকার (সেমি) ব্যবহার করে, বলুন, মোবাইল এবং ডেস্কটপে পাঠ্যটি ভাল উদাহরণ নয়।

— কনস্ট্যান্টিন শুবার্ট

এবং 1inটি 96px হিসাবে সংজ্ঞায়িত করা হয়েছে। মিমি, মিমি এর মতো সিএসএস ইউনিট পিক্সেল ঘনত্ব নির্ভর।

— ম্যাকিয়েজ ক্রাভজাইক

Yo siempre px en vez de dp y va bien

— ইভান পারডেস

মন

— ফুঁকছে

Answer 5

CSS3 হিসাবে, এমন কোনও সিএসএস ইউনিট নেই যা সত্যই ডিভাইস-স্বতন্ত্র। পরম দৈর্ঘ্যের উপর ডাব্লু 3 সি স্পেক দেখুন । বিশেষত, পরম ইউনিটগুলি তাদের শারীরিক পরিমাপের সাথে মেলে না।

যদি শারীরিক ইউনিটগুলি তাদের উদ্দেশ্যটির সাথে সত্য হয় তবে আপনি পয়েন্টগুলির মতো কিছু ব্যবহার করতে পারেন; পয়েন্টগুলি ডিপিএসের কাছে যথেষ্ট কাছে:

1 in = 72 pt
1 in = 160 dp

1 dp = 72 / 160 pt

আপনি যদি এসসিএসএস ব্যবহার করেন, আপনি পিটিএসে ফিরে আসতে একটি ফাংশন লিখতে পারেন:

@function dp($_dp) {
  @return (72 / 160) * $_dp + pt;
}

এবং এটি ব্যবহার করুন:

.shadow-2 {
  height: dp(2);
}

Answer 6

রিম ইউনিট ভিত্তিক একটি ইন্টারফেস সম্পর্কে কী?

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

Comments

আপনার ফন্টের আকার সেট করার দরকার নেই। মূল উপাদানটির ডিফল্ট ফন্টের আকারটি হাতের ডিভাইসের জন্য সাধারণত একটি বেশ যুক্তিসঙ্গত পছন্দ।

— কনস্টান্টিন শুবার্ট

Answer 7

কেন পয়েন্টগুলি ব্যবহার করবেন না, এটি ডিভাইসগুলির জুড়ে একটি সামঞ্জস্যপূর্ণ আকার। এবং পর্দার আকারের সাথে সম্পর্কিত। এটি প্রচলিত প্রকাশনা থেকে আসে বলে বেশিরভাগ এটির সাথে পরিচিত নয়।

Answer 8

ভিডাব্লু (কোনও ডিভাইসের স্ক্রিনের প্রস্থ) এবং ইমগুলির মধ্যে কিছু মিশ্রণ সম্পর্কে কী বলা যায়? আপনার ডিভাইসের স্ক্রিনের প্রস্থের উপর নির্ভর করে এখানে ফন্ট-আকার গতিশীলভাবে পরিবর্তিত হচ্ছে। আপনার পরবর্তী সিএসএস ফাইলে ব্যবহার করুন:

font-size: calc(100vw * 10 / 375);

(আইফোন 6/7/8 এর প্রস্থ 375px, এটিকে 320px (আইফোন 5) এবং এগুলিতে পরিবর্তন করুন)

সব ক্ষেত্রে এটি নিখুঁত কাজ চলছে। একটি মাত্র বিয়োগ আছে। যদি আপনার লক্ষ্যটি "পিক্সেল নিখুঁত" হয় তবে ডটের পরে আপনার বড় সংখ্যা ব্যবহার করা দরকার।

উদাহরণ: আপনার লক্ষ্য হ'ল সমস্ত পর্দায় ফন্ট-আকারের h5: 18px।

তারপরে আপনার নিখুঁত "এম" হবে:

h5 { 
 font-size: 1.79904em;
 }

নিখুঁততা ব্যবহার 18/10:

h5 { 
 font-size: 1.8em;
 }

গুগল ক্রোম অনুসারে আপনি 18.0096px পান;