CSS PX to Percentage [closed]

问题

Ok so this question seems to have been asked a fair few times but still haven't managed to get the plain simple answer I'm after from looking at others questions so will ask this my own way. I'm wanting to create a site with a container in CSS as follows:

.container {
     height: 100%;
     margin: 0 auto;
     width: 980px;
}

However for the width I'm wanting to use a percentage but for the life of me I cannot find one simple answer or even a site that converts PX to % or even just to get an answer to what percentage is used in place of 980px or 960px ? Is it 62.5% or 70% ?

Could someone please help me out with this and answer this simple question or at least give me a site that I can look at with conversions and just before anyone answers with PX to EM site, I've already looked at it and it's not clear as that site is more for font sizes.

Thank you to anyone who can answer this!

回答1:

I hate to break it to you, but you're likely to have a few people rolling their eyes at you here.

A percentage is relative to whatever the parent container's size is. 50% means "half of the width of the parent". There is no "px-%" conversion, because one is a fixed value and the other is a flexible ratio. That's... kinda why you can't find any such thing.

回答2:

Problem: To get child element in percent,

A) Child width: eg. 760px
B) Parent width : eg. 1024px

You can get parent or child width easily with JQuery. eg: $('#parent').width()

Then apply this Mathematical operation to get the percentage value of child element:
(A / B) * 100

Substituting :
(760/1024) * 100 = 74.22% .. hence solved.

回答3:

Instead of converting from pixel to percentage try to get the dimension of your element in percentage example

var width = $('#someElt').width();
var parentWidth = $('#someElt').offsetParent().width();
var percent = 100*width/parentWidth;

来源：https://stackoverflow.com/questions/22521467/css-px-to-percentage

标签

html

css

percentage