सीएसएस शीट को पीएक्स से एम

Question

किसी भी स्क्रिप्ट (php, पायथन, perl, bash, जो कुछ भी) के बारे में पता है जो स्टाइलशीट को पीएक्स से एम में परिवर्तित करेगा?

पसंद है, यह फ़ाइल नाम और आधार फ़ॉन्ट आकार (डिफ़ॉल्ट 16) का इनपुट लेगा और सभी पीएक्स उदाहरणों को एम में परिवर्तित करेगा?

जैसे:

convertpx2ems --file stylesheet.css --base-font-size 16

इस बदल जाएगा:

button { 
    font-size:14px; 
    padding:8px 19px 9px; 
} 

कुछ इस तरह हैं:

button { 
    font-size: .875em; 
    padding: .5em 1.188em .563em; 
} 

... शायद, एसएएस के साथ ऐसा करने का कोई तरीका है?

Answer 1

आप समझदारी से पीएक्स और एम आकारों का आदान-प्रदान नहीं कर सकते हैं। एक पीएक्स आकार एक पूर्ण मूल्य है जो कि जहां भी है, वही आकार बनाएगा। एक एम आकार मूल तत्व के सापेक्ष है, इस प्रकार 0.5em मूल तत्व का आधा आकार है। इस उदाहरण में

/* CSS */ 
span { font-size: 0.9em; } 

<!-- HTML --> 
<span>Testing, 
    <span>Testing, 
     <span>Testing</span> 
    </span> 
</span> 

आप पाएंगे कि शब्द "परीक्षण" और छोटे छोटे हो जाता है क्योंकि प्रत्येक स्पैन टैग का फ़ॉन्ट आकार 90 है: अगर खास मतलब नहीं होता है, कोड का निम्न भाग पर विचार उपर्युक्त में से%।

शरीर टैग के लिए, 1em की एक font-size मोटे तौर पर 16px के बराबर है, लेकिन यह केवल समय आप समझदारी से एक और

Answer 2

पिछली चर्चा से एक आकार का अनुवाद कर सकते है, यह के रूप में यद्यपि कोई ऑनलाइन लगता है जेनरेटर मौजूद है, है ना? मुझे यकीन है कि वह एक ऐसा नहीं ढूंढ सका जो पूरे स्टाइलशीट को पार्स करेगा।

सबसे पहले, अगर इनपुट इनपुट के अंदर फ़ॉन्ट से अलग, और इनपुट, या इनपुट पर लागू होता है, तो वे रिश्तेदार होंगे, और यदि हां, तो क्या और कैसे? छवियों को घोंसला नहीं किया जा सकता है, और मुझे मुश्किल है कि उन्हें प्रत्येक पैरेंट div चौड़ाई के सापेक्ष होने का कठिन समय हो। (त्रुटियों से बचने के लिए सीएसएस पीआईई के लिए रूपांतरण, यह प्रेरणादायक है)।

केवल इनपुट और छवियों के अलावा, मैं सोच रहा था कि क्या संपूर्ण स्टाइलशीट को बदलने का कोई तरीका है। यह देखने में मेरी सहायता करें कि मेरा तर्क काम करेगा या नहीं। मुझे लगता है कि मेरे पास पहले से बनाए गए कई तत्व हैं, मुझे बस उन्हें एक साथ करने की आवश्यकता होगी।

अकेले सीएसएस के साथ काम करना चाल नहीं कर सकता है, क्योंकि यह जानना असंभव है कि कौन से तत्व घोंसला जाएंगे। तो यह एचटीएमएल आउटपुट स्कैनिंग की आवश्यकता होगी। ऐसा करने का सबसे अच्छा तरीका क्या है? एकमात्र तरीका मैं सोच सकता हूं कि सभी शैलियों इनलाइन को लागू करना है, जो generator ईमेल और इस तरह के टेम्पलेट्स को कन्वर्ट करने के लिए किए गए हैं। एक बार शैलियों इनलाइन हो जाने पर, यह दिखाएगा कि सबकुछ कैसे घोंसला है। उस से, स्टाइलशीट की तुलना करें।

प्रत्येक नेस्टेड तत्व की तुलना "एम" के साथ किसी भी मूल तत्व से "em" के साथ पीएक्स उत्पन्न करने के लिए करें, और मेरे पास पहले से ही सीएसएस को पार्स करने के लिए एक रेगेक्स टूल है, जिससे यह आसान हो जाता है।

एक समस्या यह है कि एक वर्ग को विभिन्न तत्वों के तहत घोंसला जा सकता है, एम एक वर्ग में इसके संदर्भ में अलग हो रहा है, इस प्रकार पीएक्स में परिवर्तित करना असंभव है और इसे लागू किया जाना चाहिए। मेरा मानना ​​है कि एकमात्र समाधान, सीएसएस शीट में नेस्टेड संरचना, या एक हिस्से को फिर से पीएक्स लागू करने के लिए, किसी भी समय फ़ॉन्ट आकार संदर्भ में भिन्न होता है।

उदाहरण के लिए:

<code> 
    // Original Stylesheet 
    .mainClass{font-size:1em;} 

    // HTML 
    <div id="outerNest" style="font-size:.5em;"> 
     <div class="mainClass"> Font here is .5em </div> 
    </div> 

    <div class="mainClass> Font here is 1em</div> 

     // New stylesheet 
    .mainClass{font-size:16px;} 

    // newly created styles to work with px conversion 
    #outerNest .mainClass{font-size:8px;} 
</code> 

ए क्या आपको लगता है कि काम कर सकता था? बी क्या कोई बेहतर तरीका है? सी। क्या यह किसी भी तरह से लायक है? मैं इसे यादृच्छिक परिस्थितियों में नीले चंद्रमा में एक बार इस्तेमाल कर सकता था, लेकिन मुझे संदेह है कि कई लोगों को यह किसी भी मूल्य का पता चल जाएगा। या क्या ऐसी स्थिति है जिसमें यह आसान होगा जिसमें लोग यहां और वहां भागते हैं?

Answer 3

मैं इस awk में खटखटाया:

#!/bin/awk -f 

BEGIN { 
    bfs = 16; 
} 

{ 
    while (match($0, /([0-9]+\.)?[0-9]+px/)) { 
     num = substr($0, RSTART, RLENGTH - 2); 
     #print("numval: ", numval); 
     $0 = substr($0, 1, RSTART-1) (num != 0 ? (1/bfs) * num: 0) "em" substr($0, RSTART + RLENGTH); 
    } 
} 

1 

आप उपयुक्त रूपांतरण के साथ एक फ़ाइल में किसी भी पिक्सल प्रविष्टियों को बदलने के लिए उपयोग कर सकते हैं .. ध्यान दें BFS इस में करने के लिए बेस फ़ॉन्ट का आकार (16 सेट किया जाना चाहिए कि मामला) जिसका आप उपयोग करना चाहते हैं। यह भी ध्यान दें, इसका उपयोग करने के लिए आपको कुछ खोल कौशल होना चाहिए।

Answer 4

आप इसे आसानी से पर्ल में कर सकते हैं:

perl -p -i -e 's/(\d+)px/($1\/16).em/ge' stylesheet.css 

Answer 5

कॉपी/पेस्ट JSFiddle में अपने सीएसएस कन्वर्ट करने के लिए। कोड उदाहरण:

var regFindPX = new RegExp('(\\d+)px','g'); 
var reg3decPoints = new RegExp('(\.\\d{3}).*', ''); 

var css = 'css code'; 
var result; 
while ((result = regFindPX.exec(css)) !== null) { 
    var px = parseInt(result[1]); 
    var em = px/16; 
    em = em.toString().replace(reg3decPoints, '$1'); 
    css = css.replace(px + 'px', em + 'em'); 

} 

Answer 6

जेम्स बताते हैं के रूप में, किसी भी सीधे-अप कनवर्टर के साथ मुद्दा यह है कि स्टाइलशीट अनजान जो के तत्वों नेस्टेड रहते हैं है। चूंकि em मान सापेक्ष हैं, इसलिए गणना की गई font-size भारी घोंसला वाले तत्वों में भिन्न होगी। आपको एक उपकरण की आवश्यकता होगी जो HTML आउटपुट को स्कैन किए जाने के बाद स्कैन किया गया हो, और प्रासंगिक शैलियों को दोबारा समायोजित किया जाए।

मैंने एक जावास्क्रिप्ट घटक लिखा है जो इस संबंध में सहायक साबित हो सकता है। आप इसे here पकड़ सकते हैं।

सुझाए गए वर्कफ़्लो को ब्राउज़र में emify(document.body) पर कॉल करना होगा, और उसके बाद प्रासंगिक em मान निकालें और इसे अपने सीएसएस में वापस इंजेक्ट करें।

आदर्श नहीं है, लेकिन यह सटीकता के साथ ऐसा करने का एक तरीका है।

Answer 7

मुझे पता है यह एक पुराने धागा है, लेकिन मुझे लगा कि यह मदद कर सकता है किसी को:

Convert पिक्सल उन्हें करने के लिए: लक्ष्य ÷ संदर्भ = परिणाम

पूर्व:

करने के लिए 1px & का मान पाएं कंटेनर के लिए फ़ॉन्ट आकार 16px है, समीकरण निम्नानुसार होगा:

1 ÷ 16 = 0.0625 ~

1px = 0.063em

इस से

आप भी लक्ष्य * em_value द्वारा अन्य माप पा सकते हैं = परिणाम

(यह सबसे अच्छा निकटतम हजार वें दौर के लिए। है)

पूर्व:

10 * .063 =।63

10px = .63em

मैं इस भावना & कोई मदद करता है बनाता है उम्मीद है।