Como fazer seu Web página menor

HTML fornece um modo padrão para os navegadores para exibir elementos de página Web.

Os navegadores da Web, como o Internet Explorer, Chrome e Firefox suporta atalhos de teclado universal para zoom in e out de páginas Web, mas HTML e design CSS determina como uma página se comporta quando é escalado por um usuário. Se você quiser fazer a sua página Web menor em todos os navegadores, você pode usar a largura e atributos de altura em seu código de modelo, mas você deve ter cuidado ao especificar dimensões absolutas para um objeto, porque a sua página é visualizada em uma variedade de tamanhos de tela. Uma solução elegante na maioria dos casos é especificar a largura de um objeto como uma percentagem do seu pai.

Faça uma página da Web que você está exibindo no seu navegador menor pressionando "Ctrl-Minus" para diminuir o zoom. Como alternativa, defina o zoom para 100 por cento, pressionando "Ctrl-0." Esses atalhos são universais para a maioria dos navegadores, incluindo o IE, Chrome e Firefox. Diminuir o zoom de uma página Web tem o mesmo efeito sobre os elementos HTML como escalar o Janela- seu posicionamento é determinada pela quantidade de espaço na janela. Para dimensionar a janela, para a esquerda; clicar em um canto da janela, arraste-o para o canto oposto e, em seguida, liberá-lo.
Controlar a altura e largura de uma página da Web que você está projetando para tentar fazer a experiência dos seus telespectadores consistente. Comece abrindo o código do modelo em um editor de texto. Website modelos são divididos em blocos gráficas usando div ou, eventualmente, os elementos da tabela, embora mesas não são projetados para esta finalidade. O bloco div externa pode ter blocos div filho, ou sua página da Web pode ter vários elementos div de nível superior sem pais. Se um bloco div tem filhos, a sua abertura "
" precede-os e seu fechamento "
" segue-os.
Encontrar altura e largura atributos de cada elemento div. Dependendo do layout do modelo, estas definições são codificadas em CSS ou HTML, e seu código de modelo pode incluir arquivos CSS e HTML separados ou combiná-los em um arquivo HTML. Se a sua página Web tem arquivos CSS e HTML separados, eles têm os mesmos nomes de arquivo, como index.css e index.html, por exemplo. Você pode procurar por elementos div na maioria dos editores de texto, premindo "Ctrl-F" para abrir a caixa Localizar e, em seguida, à procura de "div."
Abaixar a altura ou a largura de um elemento div, substituindo o seu valor atual com um menor. Este passo pode levar algumas experiências, e você pode visualizar suas alterações, abrindo o código do modelo atualizado em um navegador da Web. Para fazer isso, certo, clique no arquivo HTML em seu desktop, escolha "Aberto em" e selecione seu browser.
Escale a sua página da Web para ajustar automaticamente a janela do navegador. Localize classe CSS do elemento div externa em seu arquivo HTML ou a sua folha de estilo externa. Defina sua max-width e atributos de altura para os seguintes valores:
.-Exterior-div elemento {
&# 9-max-width: 100% -
&# 9-height: auto-
}
Se você deseja que o elemento ocupam menos espaço, insira uma porcentagem menor para max-width. Usando este código, a altura ajusta-se automaticamente de acordo com a largura, a qual é determinada pelo tamanho da janela, uma vez que está dimensionado. O atributo max-width fornece uma aparência uniforme e sentir-se para a sua página Web em todos os tamanhos de tela.

dicas & avisos

A largura, max-largura e altura atributos determinar o tamanho de qualquer elemento HTML. Por exemplo, para dimensionar automaticamente uma imagem, adicionar os seguintes atributos à sua definição CSS:
img {
max-width: 100%;
height: auto;
width: auto / 9;
}
o "auto / 9" valor para o atributo de largura corrige um problema de escala em versões mais antigas do IE.

De esta maneira? Compartilhar em redes sociais: