1.视口视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样会让移动端出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小，这样会让网页不容易观看，可以使用meta标签，name="viewport"来设置视口的大小，将视口的大小设置为和移动设备可视区一样的大小。&l
原创
2018-12-30 19:36:17
1345阅读
响应式布局
Media Query 的使用方法
在上例中， 我们使用Media Queries来根据3种不同尺寸的窗口使用3种不同的样式。通过不同的媒体类型和条件定义样式表规则，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-widt
转载
2023-10-08 20:40:24
373阅读
css中添加屏幕自适应方法(rem)只需要在公共css文件中添加下面代码：设计稿以750px，基础字体为20px为例，兼容性高，使用过程中px转化为rem即可/*竖屏*/
@media screen and (max-aspect-ratio: /){
html {font-size:calc(100vw / * );}
@media screen and (min-width: 750px) {
转载
2024-05-07 18:32:22
109阅读
一、PC端 和 移动端适配分析： 1、PC端的适配，只是分辨率的不同引起的适配问题。这种适配好解决，这里就不讲了。 2、移动端的适配，移动端的适配主要是： 屏幕视口的分辨率和像素分辨率是不统一；不同手机的视口 分辨率也是不一样的。二、（移动端）屏幕相关概念：（下面的概念只是按照个人的理解来写的，只是为了解决前端适配的而写的。其它的概念不用知道的那么清楚）
转载
2023-07-21 17:24:35
392阅读
走向Retina WebRETINA时代的前端优化
转载
2015-10-13 10:28:00
70阅读
2评论
1、通过link方法 link方法引入媒体类型其实就是在标签引用样式的时候，通过link标签中的media属性来指定不同的媒体类型。这种方式引入媒体类型时常跟着引用的样式文件
原创
2021-07-22 18:01:41
213阅读
viewpointcss3提供了一些与当前viewpoint相关的元素，vw，vh，vim等。“viewpoint” = window sizevw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大兼容性：chrome 20+/ safari 6+/ IE
转载
2024-01-15 00:40:05
79阅读
问题 有没有遇到这样的一个问题，为什么在某些设备上需要用到2倍图。当你的设计师过来问你的时候，你可能回答她：因为这些设备像素高，需要高清的图片才能显示清楚呢。事实上要搞清楚这个问题，我们需要知道的不仅仅是分辨率这么简单。为了弄清楚为什么要用2倍甚至三倍图这个问题，我们首先需要来了解以下这些概念。有时 ...
转载
2021-10-31 13:49:00
280阅读
2评论
层叠样式表的优点更多排版和页面布局控制
可控制字号、行间距、字间距、缩进、编剧以及定位样式和结构分离
页面使用的文本格式和颜色可独立于网页主体（body区域）进行配置和存储样式可以存储
允许将样式存储到单独文档并将其与网页关联样式变得更小网站维护更容易配置层叠样式表内联样式
将代码直接写入网页的主体区域嵌入样式
在网页页头区域（<head></head>之间)定义外部样式
转载
2023-11-21 22:10:23
44阅读
# CSS 适配 iOS 的详细指南
作为一名开发者，确保你的网站在不同设备和操作系统上显示效果良好是非常重要的。特别是在 iOS 设备上，由于其独特的浏览器和渲染引擎，开发者需要一些特别的技巧来保证网页的兼容性。本文将引导你完成 CSS 适配 iOS 的全流程，并提供必要的代码示例。
## 流程概览
我们将整个适配过程分为以下几步：
| 步骤 | 描述
一、viewpoint缩放方案原理：在写CSS时完全按照设计稿来（如750px设计稿），页面开发好后在head标签内加上：<meta name="viewport" content="width={设计稿宽度}, initial-scale={屏幕逻辑像素宽度/设计稿宽度}" >代码：<script>
const width = 750
const adap
转载
2024-01-30 03:43:02
229阅读
# CSS iOS 适配
在移动端开发中，适配不同设备尺寸是一个重要的问题。针对iOS设备的适配，我们可以使用CSS来实现。本文将介绍iOS适配的基本原理，并提供一些代码示例。
## 基本原理
iOS设备的屏幕分辨率和像素密度不同，所以需要进行适配来确保在不同设备上的显示效果一致。iOS设备的适配通常包括以下几个方面：
1. 基准像素：iOS设备以点（pt）作为基准像素单位，而不是像素（p
原创
2024-01-21 04:24:11
68阅读
在移动开发中，尤其是针对iOS的布局和样式调整，适配不同设备和浏览器环境的CSS问题常常让开发者头痛不已。本文将详细记录如何解决“适配iOS CSS”的问题，包含从环境准备到集成步骤、配置详解、实战应用以及排错指南和生态扩展等内容。
## 环境准备
在开始之前，我们需要确认我们的技术栈兼容性。以下是一个关于技术栈匹配度的四象限图，帮助我们了解不同技术的适配能力。
```mermaid
quad
<script type="text/javascript">
</script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script>
1.连接到一个外部的样式表 将一个外部的样式表加入到
rem是CSS3里的一种尺寸单位，根据根页面（html）标签的字号匹配大小。比如：<html>的字号font-size:20px,那么CSS设定1rem的页面元素实际上会显示20px的大小，即1rem=<html>标签上设置的字号大小，那么1.2rem就会显示为24px的大小。与em的用法有些类似，但rem只认<html>
为什么会有浏览器兼容性问题还不是因为浏览器厂商太多了！Chrome，Frirefox，Safari，Edge，IE6，IE7，IE8，IE9...360安全浏览器，qq浏览器，世界之窗，TT，搜狗，opera，maxthon（傲游）……关键是不同厂商，甚至同一厂商不同版本，对同一段CSS的解析效果也不一致，这就导致了页面显示效果不统一，也就带来了兼容性问题。CSS浏览器兼容性问题的解决思路和方案今
转载
2024-02-22 03:26:23
46阅读
又一个O/R MAP开源项目：Retina.NET Retina.NET 1.0.0.6 Binaries (fixed SharpHsql version) (Retina.1.0.0.6.binaries...
转载
2005-08-29 19:53:00
32阅读
2评论
首先，谈一下目前为止出现的一些关于移动端适配的技术方案：（1）通过媒体查询的方式即CSS3的meida queries（2）以天猫首页为代表的 flex 弹性布局（3）以淘宝首页为代表的 rem+viewport缩放（4）rem 方式 1.Media Queries（媒体查询） meida queries 的方式可以最常见的移动端自适应布局方式，它主要是通过查询设备的宽度来执
转载
2023-10-08 23:02:29
204阅读
CSS技巧
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行?
2. margin加倍的问题?设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inlin
转载
2024-08-16 17:17:41
51阅读
一、字体属性1、font-weight:文字粗细 取值描述normal默认值，标准粗细bold粗体bolder更粗lighter更细100~900设置具体粗细，400等同于normal，而700等同于boldinherit继承父元素字体的粗细值 2、font-style：文字风格normal 正常，默认是正常的italic 倾斜3、font-size：文字大小fs：一般是12p
转载
2023-11-01 18:24:29
28阅读
