সিএসএস ইউনিট - vh / vw এবং% এর মধ্যে পার্থক্য কী?

138

আমি সবেমাত্র একটি নতুন এবং অস্বাভাবিক সিএসএস ইউনিট সম্পর্কে শিখেছি। vhএবং vwভিউপোর্টের উচ্চতা এবং প্রস্থের শতাংশ যথাক্রমে পরিমাপ করুন।

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

কীভাবে ভিডাব্লু এবং ভিএইচ ইউনিট কাজ করে

উত্তরটি বিশেষভাবে বলেছে

vw এবং vh যথাক্রমে উইন্ডোর প্রস্থ এবং উচ্চতার শতাংশ: 100vw প্রস্থের 100%, 80vw 80%, ইত্যাদি etc.

এটি %ইউনিট হিসাবে ঠিক একই মত বলে মনে হচ্ছে , যা বেশি সাধারণ।

বিকাশকারী সরঞ্জামগুলিতে, আমি মানগুলি ভিডাব্লু / ভিএইচ থেকে% এবং বিপরীতে পরিবর্তন করার চেষ্টা করেছি এবং একই ফলাফল পেয়েছি।

দুই মধ্যে একটি পার্থক্য আছে? যদি তা না হয় তবে কেন এই নতুন ইউনিটগুলি চালু করা হয়েছিল CSS3?

css viewport-units

— রিচার্ড হ্যামিল্টন
সূত্র

7

ভিডাব্লু / ভিএইচ যা করে তা হ'ল যে কোনও পিতামাতার উপর নির্ভরতা অপসারণ এবং ভিউপোর্টের আকারের উপর ভিত্তি করে সাইজিংয়ের অনুমতি দেয়।

— স্টিকাররা

2

সহকর্মী পাঠক, আইএএনসির উত্তরটি আপনার দিনকে ভালভাবে বাঁচাতে পারে, এটি অবশ্যই পরীক্ষা করে দেখুন।

— স্কিপি লে গ্র্যান্ড গৌরো

167

100%যে 100%কোনও কিছুর উচ্চতা হতে পারে। উদাহরণস্বরূপ, যদি আমি একটি পিতা বা মাতা আছে divযে 1000pxলম্বা, এবং একটি শিশু divরয়েছে যে 100%উচ্চতা, তারপর যে সন্তান divতাত্ত্বিক ভিউপোর্ট, অথবা ভিউপোর্ট এর উচ্চতার তুলনায় অনেক ছোট উচ্চতা তুলনায় অনেক বেশি লম্বা হতে পারে, যদিও divএ সেট করা হয় 100%উচ্চতা ।

আমি যদি পরিবর্তে সেই শিশুটিকে divসেট করে তুলি100vh তবে এটি কেবল 100%ভিউপোর্টের উচ্চতা পূরণ করবে এবং অগত্যা পিতামাতারও নয় div।

body,
html {
    height: 100%;
}

.parent {
    background: lightblue;
    float: left;
    height: 200px;
    padding: 10px;
    width: 50px;
}

.child {
    background: pink;
    height: 100%;
    width: 100%;
}

.viewport-height {
    background: gray;
    float: right;
    height: 100vh;
    width: 50px;
}

<div class="parent">
    <div class="child">
        100% height
        (parent is 200px)
    </div>
</div>

<div class="viewport-height">
    100vh height
</div>

স্নিপেট প্রসারিত করুন

— জোশ বিম
সূত্র

আমার একটি সাইডবার ছিল যা বুটস্ট্র্যাপ "সারি" এর মধ্যে বাসা বেধে ছিল এবং উচ্চতা নির্ধারণ করার পরেও আমি এটি পুরো পৃষ্ঠার আকার করতে পারিনি: 100%। আমার জন্য যা কাজ করেছে তা ছিল 100vh

— raghav710

27

আমি জানি প্রশ্নটি খুব পুরানো এবং @ জোশ বিম সবচেয়ে বড় পার্থক্যটি সম্বোধন করেছে, তবে আরও একটি প্রশ্ন রয়েছে:

মনে করুন আপনার একটি <div>, প্রত্যক্ষ বাচ্চা <body>যার আপনি পুরো ভিউপোর্টটি পূরণ করতে চান, তাই আপনি ব্যবহার করুন width: 100vw; height: 100vh;। width: 100%; height: 100vh;যতক্ষণ না আপনি আরও কন্টেন্ট যুক্ত করেন এবং উল্লম্ব স্ক্রোলবারটি প্রদর্শিত না হয় ততক্ষণ এগুলি ঠিক একইরকম কাজ করে। যেহেতু vwভিউপোর্ট অংশ হিসেবে স্ক্রলবার জন্য অ্যাকাউন্ট, width: 100vw;চেয়ে সামান্য বড় হতে হবে width: 100%;। এই সামান্য পার্থক্যটি একটি অনুভূমিক স্ক্রোলবার যুক্ত করে (ব্যবহারকারীর সেই সামান্য অতিরিক্ত প্রস্থ দেখতে প্রয়োজনীয়) যুক্ত করে এবং ফলস্বরূপ, উভয় ক্ষেত্রে উচ্চতাও কিছুটা আলাদা হবে।

কোনটি ব্যবহার করবেন তা সিদ্ধান্ত নেওয়ার সময় অবশ্যই এটি বিবেচনা করা উচিত, এমনকি পিতামণ্ডলের উপাদানগুলির আকারটি নথির ভিউপোর্টের আকারের সমান হলেও।

উদাহরণ:

ব্যবহার width:100vw;:

.fullviewport {
  width: 100vw;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100vw;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

স্নিপেট প্রসারিত করুন

ব্যবহার width:100%;:

.fullviewport {
  width: 100%;
  height: 100vh;
  background-color: red;
}

.extracontent {
  width: 100%;
  height: 20vh;
  background-color: blue;
}

<html>
<body>
<div class="fullviewport"></div>
<div class="extracontent"></div>
</body>
</html>

স্নিপেট প্রসারিত করুন

— IanC
সূত্র

2

সিএসএসের body { overflow: hidden }ফলে স্ক্রোলবারগুলি প্রদর্শিত না হওয়ার কারণ হবে।

— ডেভ এফ

2

আপনার উত্তর এবং কোড উদাহরণের জন্য আপনাকে ধন্যবাদ, @ আইএনসি। এটা আমাকে অনেক সাহায্য করেছে। একটি ব্যাখ্যা: আমি বিশ্বাস করি আপনি যখন "সাইডবার" লিখেছিলেন তখন আপনার অর্থ "স্ক্রোলবার" ছিল।

ভিউপোর্ট ইউনিটগুলি স্ক্রোলবার গণনা সম্পর্কে কিছু সম্পর্কিত আলোচনা এখানে আমি সহায়ক বলে মনে করেছি:

W3C এর বৈশিষ্ট VW, VH, vmin, vmax ইউনিট জন্য ( "ভিউপোর্ট শতাংশ লেন্থ") বলেছেন "কোনো স্ক্রোলবারগুলি অস্তিত্ব না অধিকৃত হয়"।

স্পষ্টতই ফায়ারফক্স প্রস্থের মধ্যে পার্থক্য: 100% এবং প্রস্থ: 100vw @ নোলোনারের মন্তব্য হিসাবে 100vw থেকে স্ক্রোলবার প্রস্থকে বিয়োগ করে ? "আমি ব্যবহার করতে পারি" উদ্ধৃত করে।

ফায়ারফক্স ছাড়া অন্য সমস্ত ব্রাউজারগুলি বর্তমানে "ভুলভাবে" উল্লম্ব স্ক্রোল বার সহ পুরো পৃষ্ঠার প্রস্থ হিসাবে 100vw কে বিবেচনা করে বলে "কি স্পেক (?) এর সাথে উত্তেজনার মধ্যে আমি কি ব্যবহার করতে পারি ?

— স্ল্যাক আন্ডারটও
সূত্র

1

ভিডাব্লু (ভিউ-প্রস্থ) এবং ভিএইচ (দর্শন-উচ্চতা) ইউনিটগুলি ভিউ-পোর্টের আকারের সাথে সম্পর্কিত, যেখানে 100vw বা vh ভিউ-পোর্টের প্রস্থ / উচ্চতার 100%।

উদাহরণস্বরূপ, যদি একটি ভিউ-পোর্টটি 1600px প্রশস্ত হয় এবং আপনি 2vw বলে কিছু নির্দিষ্ট করেন তবে তা ভিউ-পোর্ট প্রস্থের 2% বা 32px এর সমতুল্য হবে।

% ইউনিট সর্বদা বর্তমান উপাদানের প্যারেন্ট উপাদান প্রস্থের উপর ভিত্তি করে

0

একটি পার্থক্য রয়েছে যা অগত্যা উত্থাপিত হয়নি। 100 ভিডাব্লুতে স্ক্রোল বারের প্রস্থ অন্তর্ভুক্ত রয়েছে, যখন 100% এটি অন্তর্ভুক্ত করে না। এটি একটি ছোট পার্থক্য, তবে ডিজাইন করার সময় গুরুত্বপূর্ণ।

1

IanC এর উত্তর দেয়। "যেহেতু ভিউপোর্টের অংশ হিসাবে স্ক্রোলবারের জন্য ভিডাব্লু অ্যাকাউন্ট, প্রস্থ: 100vw; প্রস্থের তুলনায় কিছুটা বড় হবে: 100%;"

— j08691