আমি প্রতিক্রিয়াশীল লেআউটটি তৈরি করতে বুটস্ট্র্যাপ 3 ব্যবহার করছি যেখানে আমি পর্দার আকার অনুসারে কয়েকটি ফন্টের আকার সমন্বয় করতে চাই। এই জাতীয় যুক্তি তৈরি করতে আমি কীভাবে মিডিয়া প্রশ্নগুলি ব্যবহার করতে পারি?
উত্তর:
আপনি যদি ধারাবাহিকভাবে থাকতে চান তবে বিএস 3-তে ব্যবহৃত নির্বাচকগুলি এখানে রয়েছে:
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
দ্রষ্টব্য: এফওয়াইআই, এটি ডিবাগিংয়ের জন্য কার্যকর হতে পারে:
<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>
এখানে বিএস 4-তে ব্যবহৃত নির্বাচকরা রয়েছেন। BS4 এ কোনও "সর্বনিম্ন" সেটিংস নেই কারণ "অতিরিক্ত ছোট" ডিফল্ট। অর্থাৎ আপনি প্রথমে এক্সএস আকারটি কোড করবেন এবং তারপরে এই মিডিয়াগুলিকে ওভাররাইড করতে হবে।
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
2019-02-11 আপডেট করুন: বিএস 3 তথ্যটি 3.3.0 সংস্করণ হিসাবে সঠিক, নতুন গ্রিডের জন্য বিএস 4 আপডেট হয়েছে, 4.3.0 হিসাবে সঠিক।
<span class="visible-xs">SIZE XS</span><span class="visible-sm">SIZE SM</span><span class="visible-md">SIZE MD</span><span class="visible-lg">SIZE LG</span>
বিসিওর উত্তর এবং বুটস্ট্র্যাপ 3 কোডের উপর ভিত্তি করে, আমি যে কেউ কেবল স্টাইলশিটে সেট করা সম্পূর্ণ মিডিয়া ক্যোয়ারী অনুলিপি করতে এবং অনুলিপি করতে দেখছি তার জন্য আরও সঠিক উত্তরটি নিয়ে আসতে পেরেছি:
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
}
min-width, তবে আপনি max-widthএটিও ব্যবহার করেছেন, তাই পার্থক্য কী ?, এটি প্রয়োজনীয়?
যদি আপনি কম বা এসসিএসএস / এসএএসএস ব্যবহার করে থাকেন এবং আপনি বুটস্ট্র্যাপের একটি কম / এসসিএসএস সংস্করণ ব্যবহার করছেন তবে আপনি যদি ভেরিয়েবলগুলি ব্যবহার করতে পারেন তবে আপনার যদি তাদের অ্যাক্সেস থাকে। @ পূর্ণ-শালীন উত্তরের একটি কম অনুবাদ নীচে হবে:
@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){} /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){} /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){} /* deprecated: @screen-lg-desktop, or @screen-lg */এছাড়া জন্য ভেরিয়েবল @screen-sm-maxএবং @screen-md-maxযা 1 পিক্সেল কম হয়, @screen-md-minএবং @screen-lg-minযথাক্রমে, সাধারণত সাথে ব্যবহারের জন্য @media(max-width)।
সম্পাদনা করুন: আপনি SCSS ব্যবহার করেন, তাহলে / Sass, ভেরিয়েবল একটি দিয়ে শুরু $একটি পরিবর্তে @, তাই এটি হতে চাই $screen-xs-maxইত্যাদি
$screen-xs-maxইত্যাদি। (এবং যদি আপনি স্থানীয়ভাবে কম / এসসিএসএস ব্যবহার করছেন তবে সিএসএস সংস্করণ আমদানি করছেন বুটস্ট্র্যাপের, আপনি পুরোপুরি ভাগ্যের বাইরে রয়েছেন))
@screen-tablet, @screen-desktopএবং @screen-lg-desktopঅবচিত করা হয়েছে। আপনার ইতিমধ্যে-দুর্দান্ত উত্তরটি আপডেট করার সময় হতে পারে। ;-)
বুটস্ট্রা 3 এর মানগুলি:
/* Extra Small */
@media(max-width:767px){}
/* Small */
@media(min-width:768px) and (max-width:991px){}
/* Medium */
@media(min-width:992px) and (max-width:1199px){}
/* Large */
@media(min-width:1200px){}andশর্তগুলি সরিয়ে ফেলুন । @ জেসনমিলার তাই এটি ঠিক "অবশ্যই" নয়, এটি চশমা এবং টেমপ্লেটের প্রয়োজনীয়তার উপর নির্ভর করে।
এখানে দুটি উদাহরণ দেওয়া হল।
একবার ভিউপোর্ট 700px প্রশস্ত বা কম হয়ে গেলে সমস্ত এইচ 1 ট্যাগ 20px করুন।
@media screen and ( max-width: 700px ) {
h1 {
font-size: 20px;
}
}ভিউপোর্টটি 700px বা তার চেয়ে বড় না হওয়া পর্যন্ত সমস্ত এইচ 1 এর 20 পিক্স তৈরি করুন।
@media screen and ( min-width: 700px ) {
h1 {
font-size: 20px;
}
}আশা করি এটি সহায়তা করে: 0)
font-size: 20pxজন্য h1উভয় ক্ষেত্রেই ট্যাগ। আরও ভাল বোঝার জন্য font-sizeপ্রশ্নে জিজ্ঞাসা করা অনুসারে আপনার আলাদা ব্যবহার থাকতে পারে । বিটিডব্লিউ এখনও ঠিক আছে।
কম ফাইল আমদানি না করে বুটস্ট্র্যাপের নকল করতে কম ব্যবহার করার জন্য এখানে আরও মডুলার উদাহরণ রয়েছে।
@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;
//xs only
@media(max-width: @screen-xs-max) {
}
//small and up
@media(min-width: @screen-sm-min) {
}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
}
//md and up
@media(min-width: @screen-md-min) {
}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {
}
//lg and up
@media(min-width: @screen-lg-min) {
}অন্যান্য ব্যবহারকারীর জবাবের ভিত্তিতে, আমি সহজেই ব্যবহারের জন্য এই কাস্টম মিশ্রণগুলি লিখেছিলাম:
.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }ব্যবহারের উদাহরণ
body {
.when-lg({
background-color: red;
});
}@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }ব্যবহারের উদাহরণ:
body {
@include when-md {
background-color: red;
}
}@media (min-width:1200px) {
body {
background-color: red;
}
}বুটস্ট্র্যাপ v3.3.6 হিসাবে নিম্নলিখিত মিডিয়া ক্যোয়ারী ব্যবহার করা হয় যা ডকুমেন্টেশনের সাথে মিলে যায় যা উপলভ্য প্রতিক্রিয়াশীল ক্লাসগুলির রূপরেখা দেয় ( http://getbootstrap.com/css/#responsive-utilities )।
/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}
/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}
/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}
/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}নীচের কম ফাইলগুলি থেকে বুটস্ট্র্যাপ গিটহাব সংগ্রহস্থল থেকে নেওয়া মিডিয়া প্রশ্নগুলি: -
https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less
@mixin col-xs() {
@media (max-width: 767px) {
@content;
}
}
@mixin col-sm() {
@media (min-width: 768px) and (max-width: 991px) {
@content;
}
}
@mixin col-md() {
@media (min-width: 992px) and (max-width: 1199px) {
@content;
}
}
@mixin col-lg() {
@media (min-width: 1200px) {
@content;
}
}#content-box {
@include border-radius(18px);
@include adjust-font-size-to(18pt);
padding:20px;
border:1px solid red;
@include col-xs() {
width: 200px;
float: none;
}
}মনে রাখবেন যে পাঠ্য স্কেলিং এড়ানোই প্রতিক্রিয়াশীল লেআউটগুলির উপস্থিতির মূল কারণ। প্রতিক্রিয়াশীল সাইটের পিছনে সম্পূর্ণ যুক্তি হ'ল কার্যকরী বিন্যাসগুলি তৈরি করা যা কার্যকরভাবে আপনার সামগ্রীটি প্রদর্শন করে যাতে এটি সহজেই পঠনযোগ্য এবং একাধিক স্ক্রিন আকারে ব্যবহারযোগ্য।
যদিও কিছু ক্ষেত্রে পাঠ্য স্কেল করা প্রয়োজন তবে আপনার সাইটের সংক্ষিপ্ত বিবরণটি যাতে না ঘটে সেদিকে লক্ষ্য রাখুন point
যাইহোক উদাহরণ এখানে।
@media(min-width:1200px){
h1 {font-size:34px}
}
@media(min-width:992px){
h1 {font-size:32px}
}
@media(min-width:768px){
h1 {font-size:28px}
}
@media(max-width:767px){
h1 {font-size:26px}
}এছাড়াও মনে রাখবেন 480 ভিউপোর্ট বুটস্ট্র্যাপ 3 এ বাদ পড়েছে।
আমরা আমাদের গ্রিড সিস্টেমে মূল ব্রেকপয়েন্টগুলি তৈরি করতে আমাদের কম ফাইলগুলিতে নিম্নলিখিত মিডিয়া কোয়েরিগুলি ব্যবহার করি।
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }এছাড়াও দেখুন বুটস্ট্র্যাপ
আপনি আমার উদাহরণে দেখতে পারেন ফন্টের আকার এবং পটভূমির রঙগুলি পর্দার আকার অনুযায়ী পরিবর্তন হচ্ছে
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
/* Custom, iPhone Retina */
@media(max-width:320px){
body {
background-color: lime;
font-size:14px;
}
}
@media only screen and (min-width : 320px) {
body {
background-color: red;
font-size:18px;
}
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
body {
background-color: aqua;
font-size:24px;
}
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
body {
background-color: green;
font-size:30px;
}
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
body {
background-color: grey;
font-size:34px;
}
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
body {
background-color: black;
font-size:42px;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>এখানে মিডিয়া প্রশ্নের উপর ভিত্তি করে পৃথক প্রতিক্রিয়াশীল ফাইল সহ আরও সহজ একটি স্টপ সমাধান রয়েছে।
এটি সমস্ত মিডিয়া ক্যোয়ারী লজিককে মঞ্জুরি দেয় এবং যুক্তিটি কেবল একটি পৃষ্ঠায়, লোডার বিদ্যমান থাকতে পারে। এটি মিডিয়া কোয়েরিগুলিকে নিজেরাই প্রতিক্রিয়াশীল স্টাইলশিটগুলি না গুঁজে দেওয়ার অনুমতি দেয়।
//loader.less
// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';
/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here. When you need a larger screen override, move those
* overrides to one of the responsive files below
*/
@import 'base.less';
/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)বেস.লেস এর মত দেখতে হবে
/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
background-color: @fadedblue;
}sm-min.less এই মত দেখতে হবে
/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
background-color: @fadedgreen;
}আপনার সূচকটি কেবল লোডার.বিহীন লোড করতে হবে
<link rel="stylesheet/less" type="text/css" href="loader.less" />সহজ কিছু..
বুটস্ট্র্যাপ প্রাথমিকভাবে আমাদের লেআউট, গ্রিড সিস্টেম এবং উপাদানগুলির জন্য আমাদের উত্সে Sass ফাইলগুলিতে নিম্নলিখিত মিডিয়া ক্যোয়ারী রেঞ্জগুলি break বা ব্রেকপয়েন্টগুলি uses ব্যবহার করে।
অতিরিক্ত ছোট ডিভাইস (প্রতিকৃতি ফোনগুলি, 576px এর চেয়ে কম) xsবুটস্ট্র্যাপে এটি ডিফল্ট হওয়ায় কোনও মিডিয়া কোয়েরি নেই
ছোট ডিভাইস (ল্যান্ডস্কেপ ফোন, 576px এবং তার বেশি)
@media (min-width: 576px) { ... }মাঝারি ডিভাইসগুলি (ট্যাবলেটগুলি, 768px এবং তার বেশি)
@media (min-width: 768px) { ... }বড় ডিভাইস (ডেস্কটপগুলি, 992px এবং তার বেশি)
@media (min-width: 992px) { ... }অতিরিক্ত বড় ডিভাইস (বৃহত ডেস্কটপগুলি, 1200px এবং তার বেশি)
@media (min-width: 1200px) { ... }যেহেতু আমরা সাসে আমাদের উত্স সিএসএস লিখি, আমাদের সমস্ত মিডিয়া অনুসন্ধানগুলি সাস মিক্সিনগুলির মাধ্যমে উপলব্ধ:
এক্স এর ব্রেকপয়েন্টের জন্য কোনও মিডিয়া ক্যোয়ারী প্রয়োজনীয় নয় কারণ এটি কার্যকরভাবে @media (min-width: 0) { ... }
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }এটি গভীরভাবে বুঝতে দয়া করে নীচের লিঙ্কটি দিয়ে যান
@ মিডিয়া কেবল পর্দা এবং (সর্বাধিক প্রস্থ: 1200px) {}
@ মিডিয়া কেবল পর্দা এবং (সর্বাধিক প্রস্থ: 979px) {}
@ মিডিয়া কেবল পর্দা এবং (সর্বাধিক প্রস্থ: 767px) {}
@ মিডিয়া কেবল পর্দা এবং (সর্বাধিক প্রস্থ: 480px) {}
@ মিডিয়া কেবল পর্দা এবং (সর্বাধিক প্রস্থ: 320px) {}
@ মিডিয়া (সর্বনিম্ন প্রস্থ: 768px) এবং (সর্বোচ্চ-প্রস্থ: 991px) {
@ মিডিয়া (সর্বনিম্ন প্রস্থ: 992px) এবং (সর্বাধিক প্রস্থ: 1024px) {
আইই এর জন্য মিডিয়া প্রশ্নগুলি ব্যবহার করুন;
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen
and (min-device-width : 360px)
and (max-device-width : 640px)
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}:)
সর্বশেষতম বুটস্ট্র্যাপে (৪.৩.১) এসসিএসএস (এসএএসএস) ব্যবহার করে আপনি @ মিক্সিনের মধ্যে একটি ব্যবহার করতে পারেন /bootstrap/scss/mixins/_breakpoints.scss
কমপক্ষে সর্বনিম্ন ব্রেকপয়েন্টের প্রস্থের মিডিয়া। ক্ষুদ্রতম ব্রেকপয়েন্টের জন্য কোনও জিজ্ঞাসা নেই। @ কনটেন্টকে প্রদত্ত ব্রেকপয়েন্ট এবং আরও বিস্তৃততে প্রয়োগ করে।
@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)
সর্বাধিক ব্রেক ব্রেকপয়েন্ট প্রস্থের মিডিয়া। বৃহত্তম ব্রেকপয়েন্টের জন্য কোনও জিজ্ঞাসা নেই। @ কনটেন্টটি প্রদত্ত ব্রেকপয়েন্ট এবং সংকীর্ণকে প্রয়োগ করে।
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)
মিডিয়া যা একাধিক ব্রেকপয়েন্টের প্রস্থকে প্রশস্ত করে। @ কনটেন্টটি সর্বনিম্ন এবং সর্বোচ্চ ব্রেকপয়েন্টগুলির মধ্যে প্রয়োগ করে
@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)
ব্রেকপয়েন্টের সর্বনিম্ন এবং সর্বোচ্চ প্রস্থের মধ্যে মিডিয়া। ক্ষুদ্রতম ব্রেকপয়েন্টের জন্য কোনও সর্বনিম্ন নয়, এবং বৃহত্তমের জন্য কোনও সর্বাধিক নয়। @ কনটেন্টকে শুধুমাত্র প্রদত্ত ব্রেকআপপয়েন্টে প্রযোজ্য করে তোলে, কোনও ভিউপোর্টকে আরও বিস্তৃত বা সংকীর্ণ নয়।
@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)
উদাহরণ স্বরূপ:
.content__extra {
height: 100%;
img {
margin-right: 0.5rem;
}
@include media-breakpoint-down(xs) {
margin-bottom: 1rem;
}
}ডকুমেন্টেশন:
শুভ কোডিং;)
মূল প্রতিক্রিয়া উন্নত করতে:
ব্যবহারকারীর প্রয়োজনীয় কোডটি ডাউনলোড করতে আপনি ট্যাগের মিডিয়া অ্যাট্রিবিউট <link>(এটি মিডিয়া ক্যোয়ারিকে সমর্থন করে) ব্যবহার করতে পারেন ।
<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">এটির সাহায্যে ব্রাউজার মিডিয়া বৈশিষ্ট্য নির্বিশেষে সমস্ত সিএসএস সংস্থানগুলি ডাউনলোড করবে । পার্থক্যটি হ'ল যদি মিডিয়া বৈশিষ্ট্যের মিডিয়া-ক্যোয়ারী যদি মিথ্যা হিসাবে মূল্যায়ন করা হয় তবে সেই .css ফাইল এবং তার সামগ্রীগুলি রেন্ডার-ব্লকিং হবে না।
সুতরাং, এটিতে মিডিয়া বৈশিষ্ট্যটি ব্যবহার করার পরামর্শ দেওয়া হচ্ছে<link> ট্যাগটিতে কারণ এটি আরও ভাল ব্যবহারকারীর অভিজ্ঞতার গ্যারান্টি দেয়।
এখানে আপনি এই সমস্যা সম্পর্কে একটি গুগল নিবন্ধ পড়তে পারেন https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css
কিছু সরঞ্জাম যা আপনাকে মিডিয়া-কোয়েরি অনুসারে বিভিন্ন ফাইলগুলিতে আপনার সিএসএস কোডের বিভাজনটি স্বয়ংক্রিয় করতে সহায়তা করবে
ওয়েবপ্যাক https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin
পোস্টসিএসএস https://www.npmjs.com/package/postcss-extract-media-query