《CSS3-布局》移动设备网页等比缩放布局

简介: 《CSS3-布局》移动设备网页等比缩放布局

       移动设备网页,怎么才能做一套样式,可以适应不同分辨率设备?

       知识点:《CSS3-rem》相对于根元素字体大小的单位

                     《CSS3-media》在Html内容不变的情况,根据媒体设备不同,浏览器窗口尺寸不同,使用不同的CSS样式

                     《CSS3-flex》弹性布局

       


方案一:

1.为每个不同尺寸设备定义一套的css样式

2.使用media ,动态加载不同的css外联样式

 

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" ;href="stylea.css">

<link rel="stylesheet" type="text/css" media="screen and (orientation:landscape)" ;href="styleb.css">

方案二:

1.为每个不同尺寸设备定义一套的css样式

2.使用@media ,动态加载不同的css内部样式



@media screen and (max-device-width:960px){
    body{background:red;}
}

@media screen and (min-width:960px){ 
    body{background:orange;}
}

方案三:

1.利用rem等比例缩放特点,使用rem单位

2.为不同尺寸设备指定html的font-size大小,其他元素大小根据html的font-size进行缩放


    /* for 1080+ px width screen */
    @media only screen and (min-device-width: 1080px), only screen and (min-width: 1080px) {html, body {font-size: 170px}}

    /* for 1080 px width screen */
    @media only screen and (max-device-width: 1080px), only screen and (max-width: 1080px) {html, body {font-size: 144px}}

    /* for 800 px width screen */
    @media only screen and (max-device-width: 800px), only screen and (max-width: 800px) {html, body {font-size: 107px}}

    /* for 720 px width screen */
    @media only screen and (max-device-width: 720px), only screen and (max-width: 720px) {html, body {font-size: 96px}}

    /* for 640 px width screen */
    @media only screen and (max-device-width: 640px), only screen and (max-width: 640px) {html, body {font-size: 85px}}

    /* for 540 px width screen */
    @media only screen and (max-device-width: 540px), only screen and (max-width: 540px) {html, body {font-size: 72px}}

    /* for 480 px width screen */
    @media only screen and (max-device-width: 480px), only screen and (max-width: 480px) {html, body {font-size: 64px}}

    /* for 414 px width screen */
    @media only screen and (max-width: 414px), only screen and (max-device-width: 414px) {html, body {font-size: 55.2px}}

    /* for 375 px width screen */
    @media only screen and (max-width: 375px), only screen and (max-device-width: 375px) {html, body {font-size: 50px}}

    /* for 320 px width screen */
    @media only screen and (max-width: 320px), only screen and (max-device-width: 320px) {html, body {font-size: 42.7px}}


方案三项目实践:


1643676d6dd866d79b5e31b1b12d489346b4d6f37fb33557f94e3e6966a6726fcb6d264cdb73b4ed





相关文章
|
2月前
|
前端开发 JavaScript 开发者
探索Web设计新纪元:CSS3的革新特性如何重塑我们的网页视觉体验?
【8月更文挑战第26天】随着Web技术的发展,CSS3为前端开发带来了众多激动人心的新特性,极大提升了网页设计的视觉效果与创意空间。本文通过对比CSS3与CSS2,详细介绍了CSS3在选择器增强、圆角阴影处理、渐变背景应用、转换动画实现、文字效果优化、媒体查询支持及多列布局方面的显著改进,展示了CSS3如何助力开发者打造更具吸引力和互动性的网页体验。
45 1
|
1天前
|
前端开发 容器
使用 CSS Grid 布局实现响应式设计
【10月更文挑战第1天】使用 CSS Grid 布局实现响应式设计
10 4
|
1天前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
15天前
|
前端开发 容器
css布局-弹性布局学习笔记
这篇文章是关于CSS弹性布局的学习笔记,详细介绍了flex容器和元素的相关属性,包括flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content以及order、flex-grow、flex-shrink、flex-basis、flex和align-self等,解释了这些属性在弹性盒子布局中的作用和用法。
|
15天前
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
2月前
|
前端开发
简单几行代码CSS实现网页自动打文字效果
简单几行代码CSS实现网页自动打文字效果
43 1
简单几行代码CSS实现网页自动打文字效果
|
1月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
15天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
2月前
|
前端开发 安全 容器
CSS如何优雅实现卡片多行排列布局?
【8月更文挑战第24天】CSS如何优雅实现卡片多行排列布局?
47 3
|
2月前
|
前端开发 开发者 容器
探索现代Web开发中的CSS Grid布局技术
【8月更文挑战第29天】在数字时代的浪潮中,网页设计不断进化以适应日新月异的用户需求。CSS Grid布局技术作为一项革新性的前端工具,为设计师和开发者提供了前所未有的布局能力。本文旨在通过深入浅出的方式介绍CSS Grid的核心概念、基本用法以及在实际项目中的应用,帮助读者快速掌握这一强大的网页布局工具。
43 3