সিএসএসে সর্বাধিক গণনা বা সর্বাধিক ক্যালক

Question

এরকম কিছু করা কি সম্ভব?

max-width: calc(max(500px, 100% - 80px))

অথবা

max-width: max(500px, calc(100% - 80px)))

সিএসএসে?

Comments

আপনি কি এগুলি নিজেই চেষ্টা করে দেখেছেন?

— কাইল জি।

যেমন @ জীবাণু-স্যান্ডারবি বলেছেন, কেবল এই দুটি ব্যবহার করুন: ন্যূনতম প্রস্থ: 500px; প্রস্থ: ক্যালক (100% - 80px);

— পাওলি 4

Answer 1

min(), max()এবংclamp() অবশেষে উপলব্ধ!

ফায়ারফক্স 75, ক্রোম 79, এবং সাফারি 11.1 (বাদে clamp) থেকে শুরু হচ্ছে।

min()এবং max()যে কোনও সংখ্যক যুক্তি গ্রহণ করুন।

clamp()বাক্য গঠন রয়েছে clamp(MIN, VAL, MAX)এবং এর সমতুল্য max(MIN, min(VAL, MAX))।

min()এবং max()বাসা হতে পারে। এগুলি এর calc()বাইরে পাশাপাশি ব্যবহার করা যেতে পারে, এগুলিতে গণিতের ভাব থাকতে পারে, এর অর্থ আপনি calc()এগুলি ব্যবহার করার সময় এড়াতে পারবেন ।

সুতরাং আসল উদাহরণটি এইভাবে লেখা যেতে পারে:

max-width: max(500px, 100% - 80px);

Comments

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

— ঝিলজার

নতুন এজটি মূলত ক্রোম, এর সংস্করণগুলি ক্রোমকে অনুসরণ করে। লিঙ্কযুক্ত পৃষ্ঠাগুলির শেষে সম্পূর্ণ ব্রাউজারের সামঞ্জস্যতা ডেটা ।

— ব্যবহারকারী

Answer 2

একটি 'খাঁটি' সিএসএস সমাধান আসলে মিডিয়া ক্যোয়ারী ব্যবহার করে এখন সম্ভব:

.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}

Comments

দুর্দান্ত সমাধান! আমি এটি সর্বনিম্ন উচ্চতার জন্য ব্যবহার করেছি, স্পষ্টত আপনি মিডিয়া ক্যোয়ারীও ব্যবহার করতে পারেন max-height+1

— অ্যাভিশিক

Answer 3

না তুমি পারবে না. max()এবং min()CSS3 মান এবং ইউনিট থেকে বাদ দেওয়া হয়েছে। এগুলি তবে CSS4 মান এবং ইউনিটগুলিতে পুনরায় চালু করা যেতে পারে । তাদের জন্য বর্তমানে কোনও অনুমান নেই, এবং calc()চশমাটি কোনও calc()ফাংশনের ভিতরে বৈধ কিনা তা উল্লেখ করে না ।

Comments

আপনি উপাদানটির গণিত শৈলী (আসলে ব্যবহৃত শৈলী) পেতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন। এটি থেকে 80px সরান এবং 500 এর সাথে তুলনা করুন যা আরও বড়। সর্বোচ্চ-প্রস্থ নির্ধারণের জন্য প্রস্থ প্রাপ্তির জন্য var ভ্যালু = পার্সেন্ট (উইন্ডো.সেটকম্পিউটেস্টাইল (এল, নাল) .getPropertyValue ("প্রস্থ")) - 80) এর মতো কিছু।

— ডেভিড স্টোরে

ধন্যবাদ. তবে, আমি একটি খাঁটি সিএসএস সমাধান পছন্দ করব prefer

— আর্নাউড

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

— বি 264

এটা তোলে) সর্বনিম্ন () এবং MAX (মত মনে হয় সিএসএস মূল্যবোধ ও ইউনিট মডিউল শ্রেনী ফিরে 4 (সম্পাদকের খসড়া, 1 সেপ্টেম্বর 2017) লিঙ্ক: drafts.csswg.org/css-values/#calc-notation

— জ্যাকব ই

তবে সমস্যার সমাধান রয়েছে, নীচে @ এবং উত্তর উত্তর স্ক্রোলিং চালিয়ে যান

— অফিরমো

Answer 4

একটি workaround widthনিজেকে ব্যবহার করা হবে।

max-width: 500px;
width: calc(100% - 80px);

Comments

এটি একটি ভাল ধারণা, তবে যদি আমি @ আরনাউডের প্রশ্নটি সঠিকভাবে বুঝতে পারি তবে তিনি উভয়ই 500pxবা সর্বাধিক প্রস্থ চান 100% - 80px। আপনার সমাধান সর্বাধিক প্রস্থ সীমাবদ্ধ 500pxএমনকি 100% - 80pxবৃহত্তর হলেও ।

— থিওফিলাস

তবে এটি ব্যবহারের মতোই min()তাই অন্যের পক্ষে সহায়ক।

— Seika85

আমার কাছে মনে হয় উপরের উদাহরণটিতে সর্বাধিক প্রস্থের পরিবর্তে ন্যূনতম প্রস্থ ব্যবহার করা জিজ্ঞাসা-আচরণের সমতুল্য হতে পারে।

— গার্ট সান্দারবি

একবার পৃষ্ঠার প্রস্থ ছোট হয়ে গেলে উত্তর আমাকে একটি ফ্লেক্স পাত্রে মার্জিন যুক্ত করতে সহায়তা করে। codepen.io/OBS/pen/wGrRJV

— ofer. Sheffer

আমি @ গার্টসেন্ডারবীর মন্তব্য প্রকৃতপক্ষে সঠিক সমাধানটি দেখিয়ে একটি সমাধান পোস্ট করেছি।

— শারিলহোহমান

Answer 5

যদিও @ David-mangold এর উত্তর উপরে ছিল "বন্ধ" এটা ভুল ছিল।
(আপনি যদি সর্বাধিক প্রস্থের পরিবর্তে ন্যূনতম প্রস্থ চান তবে আপনি তার সমাধানটি ব্যবহার করতে পারেন )।

এই সমাধান প্রমান করে যে উত্তর যে @ Gert-sønderby মন্তব্য করে কাজ:
উত্তর ব্যবহার করেছেন উচিত min-width, না max-width।

এটি যা বলা উচিত ছিল:

min-width: 500px;
width: calc(100% - 80px);

হ্যাঁ, একটি সর্বাধিক () ফাংশন অনুকরণ করতে ন্যূনতম প্রস্থের প্লাস প্রস্থ ব্যবহার করুন ।

এখানে কোডপেন ( কোডপেনে ডেমো দেখতে সহজ, এবং আপনি নিজের টেস্টিংয়ের জন্য এটি সম্পাদনা করতে পারেন)'s

.parent600, .parent500, .parent400 {
    height: 80px;
    border: 1px solid lightgrey;
}
.parent600 {
    width: 600px;
}
.parent500 {
    width: 500px;
}
.parent400 {
    width: 400px;
}

.parent600 .child, .parent500 .child, .parent400 .child {
    min-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid blue;
    height:60px;
}

.ruler600 {
    width: 600px;
    border: 1px solid green;
    background-color: lightgreen;
    height: 20px;
    margin-bottom: 40px;
}
.width500 {
    height: 20px;
    width: 500px;
    background-color: lightyellow;
    float: left;
}
.width80 {
    height: 20px;
    width: 80px;
    background-color: green;
    float: right;
}

.parent600 .wrong, .parent500 .wrong, .parent400 .wrong {
    max-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid red;
    height:60px;
}

<h2>(Min) min-width correctly gives us the Larger dimension: </h2>
<div class="parent600">
    600px parent
    <div class="child">child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="child">child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent400">
    400px parent (child expands to width of 500px)
    <div class="child">child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>


<h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2>
<div class="parent400">
    400px parent
    <div class="wrong">child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="wrong">child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent600">
    600px parent
    <div class="wrong">child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

এটি বলেছে, উপরে @ অ্যান্ডির উত্তর সম্পর্কে করা সহজ হতে পারে এবং অনেকগুলি ব্যবহারের ক্ষেত্রে এটি আরও উপযুক্ত হতে পারে।

এছাড়াও নোট করুন, শেষ পর্যন্ত একটি max()এবং একটি min()ক্রিয়াকলাপ সিএসএসে প্রবর্তিত হতে পারে, তবে এপ্রিল 2019 এ এটি অনুমানের অংশ নয়।

• এখানে আপনি max()ব্রাউজারের সামঞ্জস্যতার জন্য পরীক্ষা করতে পারেন :
  https://developer.mozilla.org/en-US/docs/Web/CSS/max# ব্রাউজার_কম্প্যাটিবিলিটি ।

• প্রস্তাবের খসড়াটি এখানে:
  https://drafts.csswg.org/css-values-4/#comp-func ।
  সর্বশেষ সংশোধনীর তারিখটি দেখতে পৃষ্ঠার শীর্ষে স্ক্রোল করুন (আজকের হিসাবে, এটি সর্বশেষ 5 এপ্রিল 2019 এ সংশোধিত হয়েছিল)।

Comments

ডাউনটা কেন? বর্ণিত সমস্ত কিছুই সঠিক, এবং সমস্ত উত্সের সাথে লিঙ্ক করা হয়েছে এবং জমা দেওয়া হয়েছে।

— শারিলহোহমান

Answer 6

@ আমাউড একই ফলাফল পেতে বিকল্প আছে?

একটি নন-জেএস খাঁটি সিএসএস পদ্ধতি রয়েছে যা একই ফলাফল অর্জন করবে। আপনার প্যারেন্ট উপাদানগুলি পাত্রে প্যাডিং / মার্জিন সামঞ্জস্য করতে হবে।

.parent {
    padding: 0 50px 0 0;
    width: calc(50%-50px);
    background-color: #000;
}

.parent .child {
    max-width:100%;
    height:50px;
    background-color: #999;
}

<div class="parent">
  <div class="child"></div>
</div>