Muitas vezes é excelente um conteúdo ocupar toda a largura possível que existir para o conteúdo em uma tela. No caso de um mobile, em geral é mais do que desejável ter o conteúdo ocupando toda a largura possível. No entanto, podem existir situações onde isto não é desejado, como nas largar TV hoje em dia disponíveis.
Obviamente esta limitação existir ou não depende de cada caso concreto a ser definido pelo responsável pelo layout. E para dar este controle é que existem a propriedade max-width.
Por exemplo, tendo um width definido como 100% e max-width igual a 1000px, significa que quando o conteúdo for preencher a tela, ele o fará até o limite de 1000px.
Abaixo uma demonstração do funcionamento desta propriedade:
Artigos relacionados:
JQuery – Gerando evento automaticamente para todos os elementos filhos
Testar se um elemento está oculto usando jQuery
Diferença entre angular.copy e Angular.extend em objetos JavaScript
Por padrão é possível ter algum elemento entre um <ul> e um <il> ou <ol>
Bootstrap 3, max-width e projetos com width igual a 100%
Controle de tamanho de elementos HTML com CSS
indeterminate – A propriedade pouco conhecida do HTML Checkbox e HTML Radio
Pequeno comentário sobre diferença entre array em operações ternárias entre JavaScript e PHP
Patente / Propriedade Industrial de software