Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Transformar width:720px em porcentagem

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Pixels? e atividade Alterando o projeto existente

por Leonardo Leite Meira
| 94.3k xp | 42 posts
Autónomo

Boa noite, estou tentado transformar algumas medidas em px do meu código para uma relativa. Porém tive dificuldades em em transformar os 720px de width do contêiner, em porcentagem (pois julgo que essa seria a melhor opção). Na minha tentativa eu pensei em olhar quantos pixels tem a largura da tela e calcular quanto é a porcentagem que os 720 representa para usa-lo nessa transformação. Mas não consegui olhar a largura total da página, não sei se essa é a melhor maneira de fazer essa transformação e se, nesse caso, e realmente melhor usar porcentagem do que rem, em ou ch.

3 respostas
por Rafael Nascimento Sampaio
| 289.3k xp | 116 posts
Analista de Sistemas Senior

Olá Leonardo, Essa é uma questão muito interessante, o ideal na minha experiência é fazer relativo a sua composição original, se por exemplo você tem uma composição de 960px e nela possui um elemento com 720px os 720px que você quer transformar devem ser relativos aos 960px da sua comp, neste exemplo 75%.

Você também pode usar outras medidas relativas como vw que obtem a largura da janela ou vh que obtem a altura da janela, estas ao contrário da % não são relativas ao container em que o objeto se encontra, mas sim a janela do navegador e são compatíveis com internet explorer 9, na dúvida você pode checar o https://caniuse.com/#feat=viewport-units.

Espero ter ajudado.

por Leonardo Leite Meira
| 94.3k xp | 42 posts
Autónomo

Rafael, a ideia de usar a porcentagem que os 720px representam na tela eu entendi perfeitamente. Porém a classe .contêiner (que é um div) está dentro de uma tag "main" com largura de 563px, de acordo com o quadro que aparece quando vamos no inspecionar elemento. Portanto os 720px representaria 127% da largura da tag main, o que na pratica não faz muito sentido. Vou colocar o código todo aqui pois pode ser útil.

<!DOCTYPE html>
<html>
    <head>
        <title>Biografia - João da Silva</title>
        <meta charset="utf-8">
        <link rel="icon" href="img/favicon.png">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/site.css">
        <link rel="stylesheet" href="css/bio.css">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,600">
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700">
    </head>
    <body>
        <main>
            <h1 class="titulo-principal">Sobre mim</h1>

            <div class="container">
                <p>Moro em São Paulo mas atendo clientes do mundo todo. Sou conhecido por fazer produtos de <em>qualidade</em>, <em>durabilidade</em> e que <em>agregam valor</em> para meus clientes.</p>

                <p>Trabalho usando a web como plataforma, ou seja, respiro HTML5, CSS3 e JavaScript (ou melhor: ECMASCript). Crio sites para todos, seguindo as principais diretivas de acessibilidade, responsividade e web semântica, sem descuidar da qualidade de código.</p>

                <h2 class="subtitulo-texto">Como trabalho</h2>

                <blockquote class="citacao-bio fiat">
                    <p>João é o melhor desenvolvedor front-end com quem já trabalhei. Muito eficiente e muito capaz. Recomendo sem dúvidas!</p>
                    <cite>José Souza, Fiat</cite>
                </blockquote>

                <p>Satisfazer meus clientes é prioridade. Para isso, garanto um processo de desenvolvimento altamente interativo, baseado em feedback contínuo. <strong>Não trabalho com escopo fechado</strong>: o cliente é que decide quando o produto está pronto.</p>

                <p>Também não trabalho com prazos fechados: <strong>qualidade é importante demais para ser sacrificada</strong>.</p>

                <h2 class="subtitulo-texto">Experiência</h2>

                <blockquote class="citacao-bio petrobras">
                    <p>João domina as tecnologias como ninguém. Eu apresentava um problema, ele tinha na ponta da língua a solução mais adequada com as tecnologias mais recentes.</p>
                    <cite>Manoel Santos, Petrobrás</cite>
                </blockquote>

                <p>Já desenvolvi projetos para grandes empresas como <a href="http://www.bmw.com">BMW</a>, <a href="http://www.uol.com.br">UOL</a> e <a href="http://www.ibm.com.br">IBM</a>. Neles, o foco principal era entregar uma experiência imersiva e impactante para o usuário final sem descuidar do desempenho e da acessibilidade da página.</p>

                <p>Também já fui contratado para transformar grandes portais, como <a href="http://www.terra.com.br">Terra</a> e <a href="http://www.g1.globo.com">G1</a>, em páginas responsivas. Fui responsável por renovar o layout, reorganizar o conteúdo e re-escrever o código de forma mais reaproveitável.</p>

                <h2 class="subtitulo-texto">Comunidade</h2>

                <p>Procuro repassar meu conhecimento para a comunidade. Para isso, já dei <a href="portfolio.html">diversas palestras</a> e mantenho um <a href="blog.html">blog</a>.</p>
            </div>
        </main>
        <img src="img/eu.jpg" alt="Foto de João da Silva" class="minha-foto">
        <aside class="navegacao-site">
            <h1>João da Silva</h1>
            <nav>
                <ul>
                    <li><a href="index.html">Home</a></li>
                    <li><a href="portfolio.html">Portfolio</a></li>
                    <li><a href="bio.html">Sobre mim</a></li>
                    <li><a href="blog.html">Blog</a></li>
                    <li><a href="contato.html">Contato</a></li>
                </ul>
            </nav>
            <ul class="icones-redes-sociais">
                <li>
                    <a class="github" href="https://github.com/joaodasilva">
                        Github
                    </a>
                </li>
                <li>
                    <a class="twitter" href="https://twitter.com/joaodasilva">
                        Twitter
                    </a>
                </li>
                <li>
                    <a class="linkedin" href="https://br.linkedin.com/pub/joão-da-silva/32/4/508">
                        LinkedIn
                    </a>
                </li>
            </ul>
        </aside>
        <footer class="rodape-pagina">
            &copy; João da Silva 2014
        </footer>
    </body>
</html>
solução!
por Rafael Nascimento Sampaio
| 289.3k xp | 116 posts
Analista de Sistemas Senior

Olá Leonardo, Até é possível ter elementos maiores dentro de elementos menores, neste caso é importante verificar se o overflow está definido para visible para que o container não faça um crop do seu elemento, o posicionamento pode ser feito com o relative ou absolute para posicionar no centro do elemento, lembrando que estes posicionamentos (o relative e o absolute) são relativos ao contexto pai (o primeiro elemento pai que possua um atributo de posicionamento ou o BODY/HTML se nenhum deles tiver.

Em relação a porcentagem existe uma conta criada pelo Ethan Marcotte no seu artigo que deu nome a prática do Responsive Web Design (http://alistapart.com/article/responsive-web-design).

A fórmula é: alvo / contexto * 100 = resultado.

Neste exemplo podemos pegar os dois exemplos citados, o seu e o meu.

No caso de um elemento de 720px dentro de um elemento de 960px temos:

720 / 960 * 100 = (0.75) * 100 = 75%;

No caso do elemento de 720px dentro do elemento de 563px temos:

720 / 563 * 100 = (1.2788632327) * 100 = 127.88632327%

Isso faz todo o sentido.

Neste caso o Alvo é o elemento que você está tentando posicionar / dimensionar e o contexto é em relação ao que você está tentando.

É importante notar que quando você usa uma medida como vw ou vh você sempre está usando a janela como contexto independente do elemento que o alvo esteja contido.

Neste caso o contexto no caso de uma comp pode ser entendido como a largura onde a largura da comp = 100vw e as divisões ficam em vw.

A unidade Vw aceita unidades quebradas como por exemplo 127.88632327vw.

Vide este site http://kimpelpapelaria.com.br/ que usa a unidade de vw até para tamanho de fonte.