6
मैं एक मूल उत्तरदायी WordPress थीम स्थापित करने की कोशिश कर रहा हूं। शुरू करने के लिए, मैंने wordpress.org से टूलबॉक्स थीम को पकड़ लिया और twitter bootstrap उत्तरदायी सीएसएस/जेएस जोड़ा।फोन/छोटी स्क्रीन के लिए उत्तरदायी सीएसएस
मैंने छोटी स्क्रीन पर पैडिंग को कम करने के लिए कुछ बुनियादी परीक्षण शैलियों को जोड़ा और रंग बदलने के लिए यह संकेत दिया कि यह काम कर रहा है। किसी कारण से, लैंडस्केप फोन के लिए शैलियों काम नहीं कर रहे हैं।
आप मेरी साइट here देख सकते हैं।
मेरे उत्तरदायी सीएसएस कोड:
/* Large desktop */
@media (min-width: 1200px) {
body {
padding-left: 50px;
padding-right: 50px;
color: green;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 1199px) {
body {
padding-left: 30px;
padding-right: 30px;
color: purple;
}
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
color: blue;
}
}
/* Landscape phones and down */
@media (max-width: 480px) {
body {
padding-left: 5px;
padding-right: 5px;
color: red;
}
}
इतना ही परिदृश्य:
यह नीचे की तरह होना चाहिए फोन, यह छोटे टैबलेट परिदृश्य (800x600), टैबलेट पोर्ट्रेट (768x1024), टैबलेट लैंडस्केप (1024x768) – defau1t
@refhat अच्छी तरह से काम नहीं कर रहा है, यह सिर्फ एक शुरुआत थी (आकार वास्तव में वह हैं उत्तरदायी बूटस्ट्रैप गाइड)। मेरे पास आपके द्वारा वर्णित आकारों के नियम नहीं हैं, लेकिन मेरे पास ऐसा नियम है जिसमें फोन (<481px चौड़ा) शामिल होना चाहिए और मुझे यह नहीं पता कि यह क्यों काम नहीं कर रहा है। – MrGlass
मैंने जो नियमों का उल्लेख किया है, आपको उनके बारे में परेशान करने की आवश्यकता नहीं है बस यह सुनिश्चित करें कि इन बूटों को ट्विटर बूटस्ट्रैप के अनुसार 12 में जोड़ दिया जाए। जहां तक आपका नियम है जो आईफोन (481 पीएक्स) पर/कवर नहीं करता है। इसका मतलब है कि आपने मीडियाक्विरी ब्रेकपॉइंट को सही तरीके से सेट किया है। – defau1t