CSS移动端学习第五周

已于 2022-03-06 22:26:34 修改
阅读量230 收藏
点赞数
文章标签： css 学习 前端
于 2022-03-06 22:25:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zhangzanhao/article/details/123318294
版权

目录

移动端开发选择

一

二

视口 viewport

布局视口

视觉视口

理想视口

设置属性

二倍精灵图

物理像素和开发尺寸

为什么会不等呢？

怎么解决？

移动端开发选择

一

就做一份移动端CSS文件

这样做的好处就是简单不繁琐，做出的网页就分移动端和PC端

电脑和手机上看到的样式不同

坏处呢就是过于单调，只有这两种样式

但现在大多数网页都是选择这种，像京东，淘宝等

二

是把网页做成响应式的，这样的话就要做好几份CSS文件

这样做的好处就是，网页会根据屏幕宽度的变换而相应地改变内部的样式

像三星的官网就是这种布局

而这样做的缺点就是工作量大了好几倍，要写几份CSS文件，维护起来挺麻烦的

视口 viewport

视口分为三种，布局视口，视觉视口，理想视口

而最好的肯定是理想视口

布局视口

指能把页面中所有的元素都显示出来的视口

视觉视口

也就是咱们在手机上屏幕上显示的就叫视觉视口

理想视口

指布局视口和视觉视口的宽度相同，也就是手机屏幕能显示所有元素

用户不用因为网页太大而缩放网页浏览内容

现在手机打开京东，小米的小程序都可以叫理想视口

而在head内能用viewpoint来设置一些属性

设置属性

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, 
		minimum-scale=1.0, user-scalable=no">

这里：

width=device-width 就代表着网页宽度等于设备的宽度，也就是理想视口

initial-scale=1.0 初始缩放比

maximum-scale=1.0, minimum-scale=1.0 就代表着最大最小缩放比，为1就是不能缩放

user-scalable=no  就代表着用户不能缩放网页

二倍精灵图

物理像素和开发尺寸

物理像素是屏幕上显示的小颗粒

我的电脑分辨率为1920*1080 就是长有1920个物理像素，宽有1080个物理像素

开发尺寸1920*1080 是指电脑长有1920个px 1080个px

在PC端里1px等于1物理像素，即物理像素比为1:1

在移动端里1px不一定等于1物理像素

iphone8屏幕像素比为2.0 即1px为两个物理像素

为什么会不等呢？

因为设计者想把更多的物理像素点挤到手机里，增加分辨率   视网膜屏幕

所以物理像素点的大小就会变小，就会有好几个物理点才等于1像素  

这个时候图片就相当于被放大了几倍变模糊  文字因为是纯色的所以不会

怎么解决？

50*50的图片 放到手机变成了100*100 模糊

我们先用原本就100*100的图片，用CSS把他缩放到50*50 然后再到手机显示  变成100*100了  正常  这种方式就是2倍图

Zhangzanhao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
[前端学习笔记] CSS移动端rem布局
酸奶的博客
10-04 900
一、rem布局 技术方案1： rem + 媒体查询 + less 技术方案2： rem + flexible.js【推荐】 二、rem是什么 rem（root em）是一个单位。它可以实现： 1）页面布局文字随屏幕大小变化而变化 2）屏幕变化时，宽度和高度可以等比例缩放 rem的优点就是可以通过修改html文字大小来改变页面中元素的大小，可以整体控制。 <style> html { /* 设置html文字大小 */ font-siz
移动端学习第七周 less
Zhangzanhao的博客
03-27 319
我们CSS文件没有运算功能，也不好维护，想改一个颜色必须全部都改一遍，这个时候就可以用less 变量 @color:pink; body { background-color: @color; } div { background-color: @color; } 很简单哈，声明变量就在前面加个@就可以了 编译 以后的CSS代码都在这里写，然后一保存，插件就会帮我们less文件编译成一个CSS文件，所以只需在less上编码即可 然后在html上再引用我们的CSS文...
[前端学习笔记] CSS移动端流式布局
酸奶的博客
10-04 373
一、移动端基础知识 浏览器现状 1）PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、IE浏览器、QQ浏览器、百度浏览器… 2）移动端常见浏览器：UC浏览器、QQ浏览器、欧朋浏览器、百度手机浏览器、360安全浏览器、谷歌浏览器… 国内的手机浏览器都是根据Webkit修改的内核，所以只需要处理Webkit内核浏览器即可。 手机屏幕现状 移动端碎片化比较严重，设备屏幕尺寸种类、分辨率种类繁多。开发时无需关注分辨率，使用的尺寸单位是px，常见移动端屏幕尺寸如下（物理像素比的含义在下方第5点进行解释）：
第五周 CSS基础学习笔记
chengfyi的博客
11-27 66
使用顺时针方向指定元素的内边距 如果不想每次都要分别声明padding-top，padding-right，padding-bottom和padding-left属性，可以把它们汇总在padding属性里面声明，如下： padding: 10px 20px 10px 20px; 这四个值按顺时针排序：上，右，下，左，并且设置的效果等同于特定声明每一个方向的padding。 使用顺时针方向指定元素的外边距 同样，每个方向的外边距值可以在margin属性里面汇总声明，来代替分别声明margin-t
css实现移动端图片文字水平居中
09-24
在移动端网页设计中，经常需要将图片和文字组合在一起，并且要求它们整体水平居中，以达到美观和用户体验的效果。本文将介绍两种CSS方法来实现这个目标。 首先，我们来看第一种解决方案，它利用了行内元素的`...
CSS3移动端登录蓝色模板下载.zip
07-03
【标题】"CSS3移动端登录蓝色模板下载.zip"所涉及的知识点主要集中在CSS3和移动端设计上，同时可能涉及到JavaScript特效。这个压缩包提供了一个专为手机端设计的用户登录界面模板，通常这样的模板会充分利用CSS3的新...
H5+CSS3+移动端，文章页面+轮播图+响应式
07-12
首先，HTML5是超文本标记语言的第五个版本，它引入了许多新的元素和API，旨在提高网页的语义性和可访问性。例如，`<header>`和`<footer>`元素用于定义页面头部和底部，`<article>`用于封装独立的内容，`<section>`则...
html携程网首页，移动端css
07-03
HTML5是超文本标记语言HTML的第五次重大修订，它引入了许多新的特性和功能，极大地改善了网页的用户体验，特别是在移动端应用上。携程网首页作为一个重要的在线旅行服务平台，充分利用了HTML5的优势来优化其移动端的...
移动端H5周历组件
08-12
在构建移动端H5周历组件时，开发者需要考虑以下几个关键知识点： 1. **响应式设计**：为了适应不同尺寸的屏幕，组件需要采用响应式布局。这可能通过使用CSS媒体查询来实现，确保在不同分辨率和设备方向下都能正确...
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2825
title>充电效果
CSS实现table表格：隔行换色的效果
pan_junbiao的博客
07-12 309
表格是网页中十分重要的组成元素。表格用来存储数据，包含标题、表头、行和单元格。在HTML语言中，表格标记使用符号表示。定义表格光使用是不够的，还需要定义表格中的行、列、标题等内容。在CSS中，可以使用 nth-child 选择器来实现隔行换色。该选择器用于匹配父元素中的特定子元素，nth-child(odd) 可以匹配奇数行，nth-child(even) 可以匹配偶数行。使用CSS样式实现 table 表格隔行换色的效果。
css-grid布局(栅格布局)
YogaMiller的博客
07-15 531
* 数字和命名搭配搭配也可, 1 / t 注意如果是一个位置的话可省略, 比如 1 / 2 2 / 3 这里的2 3就可以省略*//* [d]150px 100px;搞不懂为什么加个命名就变小了.... *//* 目前喜欢这种的方式, 比较直观 . 表示这个位置空着 */grid 一个比flex更强大的布局,适合做整体布局。/* g-r-start g-r-end 的简称 *//* 相同的名字 代表相同的区域 */fr 只能放在第二个参数。
HTML5+CSS3小实例：纯CSS实现奥运五环
艾恩小灰灰的博客
07-15 143
实例：纯CSS实现奥运五环。技术栈：HTML+CSS。
CSS实现从上往下过渡效果
m0_56164131的博客
07-11 228
要实现一个从上往下显示的过渡效果，可以使用CSS的@keyframes规则来创建一个动画，使得元素在垂直方向上逐渐改变其位置。
scss 语法
True Truth
07-14 115
scss 是 css 的超集， 主要是引入了 变量， 函数， 继承， 算术计算。
CSS-0_3 CSS和单位
最新发布
乡亲们啊的博客
07-15 561
直到iphone4诞生，彻底改变人们对“上网”这个行为的思维方式。原来我们可以在一个方砖大小的设备上访问页面，那我们将来是不是可以在一个几十上百寸的巨幕上访问页面？在一张A4纸大小的板子上访问页面？人们用千奇百怪的设备访问你的网页，这时候如果你依然墨守成规，那就只能在用户糟糕体验之后的唾弃声中抱着你的电脑屏幕退场。
CSS基础
lvshihao_的博客
07-15 406
项目上线时，我们会通过工具将【展开风格】的代码，变成【紧凑风格】，这样可以减小文。：选择器与声明块之间，属性名与属性值之间，均有一个空格，理论上能省略，但最好。外部样式的优势：样式可以复用、结构清晰、可触发浏览器的缓存机制，提高访问速。件体积，节约网络流量，同时也能让用户打开网页时速度更快。行内样式表，只能控制当前标签的样式，对其他标签无效。：最后一个声明后的分号理论上能省略，但最好还是写上。1. 内部样式、外部样式，这二者的优先级相同。添加样式，实现了：结构与样式的分离。的思想，不推荐大量使用，只。
CSS图像不透明度的艺术：探索透明度控制的无限可能
Lesleyhnj的博客
07-15 74
在网页设计中，图像的不透明度（Opacity）和透明度（Transparency）是两个关键的概念，它们不仅影响着页面的视觉效果，还能增强用户体验，创造丰富的交互效果。通过调整图像的不透明度，设计师可以实现元素间的层次感，营造柔和或梦幻的氛围，甚至在动画和过渡效果中发挥重要作用。本文将从不同角度深入探讨CSS中控制图像不透明度的技术，帮助你掌握这一技能，提升网站的美学品质。定义与作用： 属性允许我们改变HTML元素的不透明度，取值范围是0到1之间，其中0表示完全透明，1表示完全不透明。这个属性应用于整个元素
运用css3做一个模仿移动端页面的项目
06-10
好的，我可以给你提供一个简单的例子，你可以通过这个例子来学习如何使用CSS3制作移动端页面。 首先，我们需要一个HTML页面，可以使用以下代码作为模板： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>移动端页面</title> <link rel="stylesheet" href="style.css"> </head> <body> <header>这是头部</header> <nav>这是导航</nav> <main> <section> <h2>这是第一部分</h2> <p>这是第一部分的内容</p> </section> <section> <h2>这是第二部分</h2> <p>这是第二部分的内容</p> </section> </main> <footer>这是底部</footer> </body> </html> ``` 接下来，我们需要一个CSS文件来为页面添加样式，可以使用以下代码： ```css body { font-family: sans-serif; margin: 0; padding: 0; } header, nav, main, section, footer { box-sizing: border-box; } header { background-color: #333; color: #fff; padding: 1rem; } nav { background-color: #eee; padding: 1rem; } main { display: flex; flex-wrap: wrap; justify-content: space-between; padding: 1rem; } section { background-color: #f2f2f2; border: 1px solid #ddd; border-radius: 5px; box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); margin-bottom: 1rem; padding: 1rem; width: calc(50% - 1rem); } @media screen and (max-width: 640px) { header { font-size: 1.5rem; } nav { font-size: 1.2rem; } main { padding: 0.5rem; } section { width: 100%; } } ``` 通过以上代码，我们实现了以下功能： 1. 设置了全局样式，包括字体和盒模型。 2. 为header、nav、main、section和footer设置了盒模型。 3. 为header和nav设置了背景色和文字颜色，并且为header设置了内边距。 4. 为main设置了flex布局和内边距，将section元素分为两列，并且设置了元素之间的间距。 5. 为section设置了背景色、边框、圆角和阴影，并且设置了元素之间的间距。 6. 使用@media查询，为小屏幕设备设置了不同的样式，包括字体大小和内边距，并且将section元素设为100%宽度。 你可以根据以上例子进行实践，并且根据自己的需要添加更多的CSS3特性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值