প্রশ্ন ট্যাগ «responsive-design»

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

139 twitter-bootstrap  user-interface  twitter-bootstrap-3  responsive-design  bootstrap-4 

আমার কাছে নিম্নলিখিত কোড রয়েছে যা একটি ধারক সেট আপ করে যার উচ্চতা রয়েছে যা ব্রাউজারটি পুনরায় আকারের (বর্গক্ষেত্রের অনুপাত বজায় রাখার জন্য) প্রস্থের সাথে পরিবর্তিত হয়। এইচটিএমএল <div class="responsive-container"> <div class="dummy"></div> <div class="img-container"> <IMG HERE> </div> </div> সিএসএস .responsive-container { position: relative; width: 100%; border: 1px solid black; } …

135 html  css  responsive-design  vertical-alignment 

আইফোন 5 এর দীর্ঘ স্ক্রিন রয়েছে এবং এটি আমার ওয়েবসাইটের মোবাইল ভিউটি ধরছে না। আইফোন 5 এর জন্য নতুন প্রতিক্রিয়াশীল নকশার প্রশ্নগুলি কী কী এবং আমি বিদ্যমান আইফোন প্রশ্নের সাথে একত্রিত করতে পারি? আমার বর্তমান মিডিয়া ক্যোয়ারীটি হ'ল: @media only screen and (max-device-width: 480px) {}

132 iphone  css  responsive-design  media-queries  iphone-5 

নীচের বর্ণিত লেআউটের মতো পৃষ্ঠার কেন্দ্রে ডিভি ডি পজিশনে বুটস্ট্র্যাপ ব্যবহার করে আমার একটি প্রতিক্রিয়াশীল পৃষ্ঠা তৈরি করতে হবে।

132 css  twitter-bootstrap  responsive-design 

আমার ওয়েবসাইটে একটি ইউটিউব ভিডিও এম্বেড রয়েছে এবং আমি যখন স্ক্রিনটি ট্যাবলেট বা ফোনের আকারে সঙ্কুচিত করি তখন এটি প্রায় 560px প্রস্থে সঙ্কুচিত হয়ে যায়। ইউটিউব ভিডিওগুলির জন্য এটি কি এই স্ট্যান্ডার্ড বা এমন কিছু আছে যা কোডটি আরও ছোট করার জন্য আমি যুক্ত করতে পারি?

125 youtube  responsive-design  embed 

আমার কাছে একসাথে রাখার জন্য একটি সাইট রয়েছে 16:9যা একটি ভিডিওর মতো প্রায় ল্যান্ডস্কেপের একটি নির্দিষ্ট দিক অনুপাত । উপলভ্য প্রস্থ এবং উপলব্ধ উচ্চতা পূরণ করার জন্য আমি এটি কেন্দ্রিক এবং প্রসারিত করতে চাই, তবে কখনও কখনও উভয় পক্ষেই বড় হতে চাই না। উদাহরণ স্বরূপ: একটি লম্বা এবং পাতলা পৃষ্ঠায় …

122 html  css  responsive-design  aspect-ratio 

আমার কাছে একটি ওয়েবসাইট রয়েছে যা অবশ্যই মোবাইল ফোনের জন্য প্রতিক্রিয়াশীল। আমি আমার ডেস্কটপ ব্যবহার করে এটি তৈরি করেছি। আমি যখন ব্রাউজার উইন্ডোজগুলি মোবাইল ফোনের জন্য নিখুঁতভাবে কাজ করে তা সামঞ্জস্য করি তবে যখন আমি আমার আসল মোবাইল ফোনে এটি পরীক্ষা করি: স্যামসাং গ্যালাক্সি এস 2 এটি মোবাইল দর্শনের জন্য …

117 mobile  web  responsive-design 

লক্ষ্যটি হল <svg>উপাদানটি তার পিতামাতার ধারকের আকারে প্রসারিত করা, এই ক্ষেত্রে ক<div> , এটি ধারক যত বড় বা ছোট হোক না কেন। কোড: <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" > <rect x="0" y="0" width="100" height="100" /> </svg> </div> এই সমস্যার সর্বাধিক সাধারণ …

112 css  html  svg  responsive-design 

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

109 html  css  twitter-bootstrap  responsive-design 

টুইটার বুটস্ট্র্যাপটি প্রতিক্রিয়াশীল / ডিভাইস-বান্ধব হতে ডিজাইন করা হয়েছে, এটি আপেক্ষিক ফন্টের আকারগুলি কেন ব্যবহার করে না?

104 twitter-bootstrap  mobile  fonts  responsive-design  font-size 

এটি একটি নির্বোধ প্রশ্নের মতো শোনাতে পারে। আমি যদি নিয়মিত প্রদর্শনের জন্য এই সিএসএস স্নিপেট ব্যবহার করি ( box-bg.png200px বাই 200px কোথায় ); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } এবং যদি আমি রেটিনা ডিসপ্লেগুলিকে লক্ষ্য করতে এই জাতীয় মিডিয়া কোয়েরি ব্যবহার করি (@ 2x চিত্রটি উচ্চ-রেজাল্ট সংস্করণ হিসাবে); …

102 css  responsive-design  media-queries 

আমি নীচের চিত্রের মতো একটি আকৃতি তৈরি করার চেষ্টা করছি কেবলমাত্র একদিকে স্লেন্টেড এজ দিয়ে (উদাহরণস্বরূপ, নীচের দিকে) অন্য প্রান্তগুলি সোজা থাকে। আমি সীমান্ত পদ্ধতিটি ব্যবহার করার চেষ্টা করেছি (কোডটি নীচে দেওয়া হয়েছে) তবে আমার আকারের মাত্রা গতিশীল এবং তাই আমি এই পদ্ধতিটি ব্যবহার করতে পারি না। .shape { position: …

93 html  css  responsive-design  css-shapes 

আমার এই কোডটি রয়েছে: <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> …

92 html  css  twitter-bootstrap  twitter-bootstrap-3  responsive-design 

আমার কাছে বর্তমানে এর মতো কিছু রয়েছে: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> </div> এখন ধরে contentনিই যে, একই উচ্চতার বাক্সগুলি ছিল সমস্ত একই প্রস্থ সহ - আমি কীভাবে একই "গ্রিড ভিত্তিক লেআউট" রাখতে পারি এবং …

91 html  css  twitter-bootstrap  responsive-design  bootstrap-4 

ওভারল্যাপ এড়ানোর জন্য আমরা কীভাবে মিডিয়া প্রশ্নগুলিকে নির্ভুলভাবে আউট করব? উদাহরণস্বরূপ, যদি আমরা কোডটি বিবেচনা করি: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /* everything else */ } সমস্ত সমর্থনকারী …

90 css  responsive-design  media-queries