对中文来讲，文字的底部才是基线位置；同时 文字的对齐 是使用顶线或底线 来对齐的。 * 为什么行高不一样，然而渲染的高度却是一样的呢？...另外 解码base64也是会有 额外开销的。 * 多分辨率的适配 * 背景缩小 用在什么场景呢？...* cursor指针 非样式布局 - CSS Hack 用来处理特定浏览器的办法，来兼容不同浏览器，在一部分浏览器上生效的css。...* Hack 即是 不合法 但是生效的 css写法 * 主要用于区分不同浏览器 * 缺点：难理解 难维护 易失效 * 替代css hack的方案：检测浏览器是否有 某些特性，没有某些特性时 做针对的处理...图标字体：把图标做成文字，给他定义成特别的字体，在需要使用的地方 引入该字体。 * base64的使用 把图片变成文本的一种方式，然后把base64字符串 内嵌到css中 进行使用。
首先，我们需要了解如何在 PC 端查看不同设备的显示情况，这里我使用的是 Chrome 浏览器，对于所有搞开发的小伙伴来说，Chrome、火狐浏览器以及新版的 Edge 浏览器应该是最好用的工具了接着，...响应式布局，通过媒体查询 @media 实现一套 HTML 配合多套 CSS 实现适配；比如，小米商城移动端使用 rem 布局，第二种，采用的就是响应式布局，窗口在不同大小的时候，内容的排列方式是不同的...，如果你的用户群都是用最新版的浏览器，那推荐 rem；如果需要考虑兼容性，那就使用 px 或者两者同时使用。...媒体查询的格式：@media（媒体特性） { CSS 样式}代码如下：的 CSS 媒体查询 -->media="(max-width: 800px)" href="example.css"/>使用 Media
也不做放大比例 flex-shrink 定义项目的缩小比例 默认是0；子元素空间不足，也不会进行缩小比例 6、普通的响应式布局 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 6.1 原理...使用媒体查询方式进行不同尺寸下的css更改。...@media screen and (min-width:960px){ body{ background:orange; } } // 这里表示当窗口尺寸大于960px时，body的背景颜色是...@media screen and (min-width:960px) and (max-width:1200px){ body{ background:yellow; } } // 这里表示当窗口尺寸大于...所有新的浏览器都支持 XHTML css级联样式表（Cascading Style Sheet）简称“CSS”，通常又称为“风格样式表（Style
_self:在本窗口中打开 _top:在浏览器的整个窗口中打开 (2) ：设定基准的字体，字号和颜色 属性： Face:设置字体（如黑体，楷体等...absbottom:文字的底线位于图片的底部 Absmiddle：文字的底线位于图片的中部 baseline：英文文字基准线对齐 Texttop：英文文字上边线对齐 10、插入超链接... Rev:指定从目标文档到源文档的关系 type tabindex:对新窗口中的对象重新排序 URL格式： http://进入万维网站点 ftp...事例： (2)、文档样式表用标签表示 属性：dir lang title media(文档要使用的媒介类型...) type（样式类型） 级联样式表type的属性值都是text/css，javascript使用的样式表都是text/javascript Media的属性值：
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 ?...建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。...{ flex: 1; } 六、固定的底栏 有时，页面内容太少，无法占满一屏的高度，底栏就会抬高到页面的中间。...，设定水平垂直居中，margin:auto*/ /*主轴元素顺序的排布，在子元素上使用order进行排序,浏览器会根据order,从小到大进行排序*/ /*如果想要让某个子元素，单独在侧轴方向进行布局设定...，那么使用algin-self*/ /*按照剩余进行分布：flex*/ /*弹性布局可以换行*/ /*flex-wrap: wrap;*/ /*弹性布局可以逆着换行*/ /*flex-wrap
CSS hack是通过在CSS样式中加入一些特殊的符号，让不同的浏览器识别不同的符号（什么样的浏览器识别什么样的符号是有标准的，CSS hack就是让你记住这个标准），以达到应用不同的CSS样式的目的，...比如.kwstu{width:300px;_width:200px;}，一般浏览器会先给元素使用width:300px;的样式，紧接着后面还有个_width:200px;由于下划线_width只有IE6...，所以我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。...「9」，而IE6和IE7可读「*」(米字号)，另外IE6可辨识「_」(底线)，因此可以依照顺序写下来，就会让浏览器正确的读取到自己看得懂得CSS语法，所以就可以有效区分IE各版本和非IE浏览器(像是Firefox...另外考虑到opera部分支持，完全支持:root,所以不使用。
14.CSS3多媒体 针对苹果手机，安卓手机，平板等设备会较多用到多媒体查询！ 使用@media查询，可以针对不同设备定义不同规则！ 语法： 1....media="mediatype and|not|only (media feature) " href="media.css"> 2....15.响应式web设计： 只使用html+css；所有设备上都能很好的显示！ 提升用户体验：根据用户行为或者不同的设备环境进行相应的相应和调整！...网络视图：网页时按列来进行布局的！ 响应式网络视图：通常12列，宽度100%，浏览器窗口拉伸时会自动改变！ ? 控制布局，每列的百分比：100%/12=8.33%； ? 示例： 1 的方向浏览网页，所以可以使用： orientation：portrait（竖屏显示） | landscape（横屏显示）; @media only screen and (
monochrome:检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到） resolution:检测屏幕或打印机的分辨率。...6.响应式设计的核心CSS技术Media(媒体查询器)的用法 1.使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果 缩小页面） 2.IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果： ...6.响应式设计的核心CSS技术Media(媒体查询器)的用法 1.使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果 缩小页面） 2.IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
2.媒体查询： 这个是css3中给出的，我们要解决的问题是适应手机屏幕，这个媒体查询正是为解决这个问题而生，媒体查询的功能就是为不同的媒体设置不同的css样 式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等...，最常用的形式 phone:@media screen and (max-width：767px) {/手机中样式/} pad：@media screen and (max-width：991px)and...那就要用到js在页面加载时获取window的宽度（浏览器窗口的宽度）$(window).width();在开发手机页面的时候，一般我们设置最大宽度为640px，因为640px可以保证在至今最宽的手机上显示时网页两端刚好贴合屏幕...屏幕放大缩小这三个div也同样还在一行等比放大缩小 html 1 <div class="box...} 注意这里有一个小坑，当你把这个小demo拿到谷歌浏览器里面验证的时候，你会发现开始这3个div会随着你浏览器窗口缩小而缩小，到达某个值后就不动了，原因是谷歌浏览器默认支持html
_parent:在上一级窗口中打开 _blank:在新一窗口中打开 _self:在本窗口中打开 _top:在浏览器的整个窗口中打开 (2) ：设定基准的字体，字号和颜色 属性： Face...Bottom：文字的中线位于图片的底部 left：图片在文字左侧 Right:图片在文字的右侧 absbottom:文字的底线位于图片的底部 Absmiddle：文字的底线位于图片的中部 baseline...accesskey：链接热键 Dir lang align class id style title charset rel：指定从原文档到目标文档的关系 Rev:指定从目标文档到源文档的关系 type...事例： (2)、文档样式表用标签表示 属性：dir lang title media(文档要使用的媒介类型) type（样式类型） 级联样式表type...的属性值都是text/css，javascript使用的样式表都是text/javascript Media的属性值：screen 计算机显示屏（默认） tv（电视） projection 剧场
，相对浏览器窗口固定在一个位置Inherit:继承父元素的position值。...特别是如果你需要设计响应式的页面，@media是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器宽度和高度重新渲染页面。CSS 引入方式？外部样式表。引入一个外部CSS文件；内部样式表。...:480px)”>CSS : @media only screen and (max-device-width:480px) {/css样式/}在网页中的应该使用奇数还是偶数的字体？...CSS3实现优点：开发时间短、性能和开发效率比较好，缺点是不能兼容到低版本的浏览器jQuery实现通过控制不同层滚动速度，计算每一层的时间，控制滚动效果。...url属性使用base64的优点：① 减少一个图片的 HTTP 请求使用base64的缺点：① 根据base64的编码原理，编码后的大小会比源文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体积增加
移动端基础 1.1 浏览器现状 国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。...媒体查询 2.1 媒体查询简介 媒体查询（Media Query）是CSS3新语法。...使用 @media查询，可以针对不同的媒体类型定义不同的样式 @media 可以针对不同的屏幕尺寸设置不同的样式 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面 目前针对很多苹果手机...feature 媒体特性必须有小括号包含 @media mediatype and|not|only (media feature) { CSS-Code; } 2.3 mediatype...，媒体查询我们要按照从小到大或者从大到小的顺序来写 3. less 3.1 less 介绍 css 的弊端 CSS 需要书写大量看似没有逻辑的代码，CSS 冗余度是比较高的。
指的是虚拟窗口的宽度。...5)、如果页面是经过缩小适应屏幕宽度的，会出现一个问题，当文本框被激活（获取焦点）时，页面会放大至原来尺寸。...一：CSS判断横屏竖屏 写在同一个CSS中 @media screen and (orientation: portrait) { /*竖屏 css*/ } @media screen...and (orientation: landscape) { /*横屏 css*/ } 分开写在2个CSS中 竖屏 @media screen and (orientation: portrait...; } }, false); //移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态
，会有结果偏差 3、使用浏览器自带的设备模拟器(Emulator) 优势：简单，功能丰富 不足：会有结果偏差 3、视口 - Viewport IOS中的Safari...; 方法3:弹性布局 要 配合着 flex-wrap:wrap; 6、响应式网页都要使用CSS3 Media Query的技术来判断设备的尺寸 - 最重要...w>=992px 背景色为 粉色 5、CSS3 Media Query CSS3 媒体查询技术 作用：可以根据不同的媒体类型以及特性去执行不同的CSS 语法： 通过...：判断指定浏览器窗口宽度最小值 3、max-width ：判断指定浏览器窗口宽度最大值 ex: 1、在屏幕(PC,PAD...具体使用： 1、有选择性的执行CSS片段中的内容 @media screen and (min-width:768px
一、响应式页面概述 在我们学习媒体查询之前，先来了解一下什么事响应式页面 响应式页面 这个是bootstrap的中文文档网站，大家可以用chrome浏览器来模拟手机端的浏览效果，可以看到手机端和电脑端访问同一个网页时...响应式页面强调的是一套代码。 二、媒体查询 通过媒体查询，我们让css检测到浏览器视窗的展示尺寸，然后根据不同的浏览器视窗尺寸设置不同的样式，进而实现了同一套代码适应不同设备的功能。...max-width 媒体查询是CSS3中增加的新特性，可以使用@media来定义不同的条件和样式，窗口尺寸（或设备尺寸）满足指定条件的时候才会应用指定的样式，实例代码如下所示。 1 浏览器的时候（PC端的浏览方式），我们可以看到div元素的背景色为红色，当我们将浏览器的窗口缩小（移动端的浏览方式），当浏览器尺寸宽度小于600px的时候，元素的背景色会变成蓝色，这就是利用媒体查询实现的最基本的响应式页面...blue; 4 } 5 } 通过上面的方法，我们可以定义一个有多个标准的媒体查询，在上面的代码中，窗口大于600px并且小于900px的时候，样式生效，我们可以将浏览器窗口由大到小的收缩，可以看到元素颜色变化了两次
不可轻易限定宽高 用户可以自行设定自己的浏览器，例如 Android 手机可以设定显示字体大小，写死的高度会让字体相互重叠。 RWD失效 移动设备的高度是无限的，宽度是有限的。 请不要把宽写死。...优先使用 grid 排版 请不要花很多时间在写 media query ，设定一堆 breakpoint ，自己写组件样式，自己控制每种设备上的容器宽度。...请使用 grid system ，这些都是已经成熟的框架，而且有些也已经帮你处理了浏览器相容问题。...再来是iPhone手机的 retina ，会将图片放到手机上时自动做两倍缩小，在一开始制作时即可发现图片载入是否吃效能。为了让图片能在iPhone上有更好的体验，建议移动版优先。...请勿任意使用 br hr tag br 是换行，请使用在 p tag 里面，当 p 里面文字过多时可以使用。
一、百分比布局 比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着浏览器的变化而变化，从而实现响应式的效果。...二、媒体查询布局 通过@media 媒体查询，可以通过给不同屏幕的大小编写不同的样式来实现响应式的布局。 响应式缺点：如果浏览器大小改变时，需要改变的样式太多，那么多套样式代码会很繁琐。...，@media 会结合删格系统一起来使用，实现真正意义上的响应式开发。...四、vw、vh 响应式布局 vw 和 vh 分别相对的是视图窗口的宽度和视口窗的高度。...五、flex 弹性布局 弹性布局是一种十分方便的，只需要依赖于 CSS 样式的实现响应式布局的方式，也是最多用到的一种实现响应式的方法。
此时，我们的设备像素仍然没有改变，还是1920*1080，css像素的数量也没有改变，但是css像素大小变了。 假设放大到200%， 那么1个css像素就等于两个设备像素， 以此类推。...那么html元素有多宽呢，默认情况下它和浏览器窗口一样宽，这也就是为什么div总是占据浏览器宽度的50%，而html元素则是受限于viewport(和viewport占据一样的宽度)，换句话说，viewport...完全等于浏览器窗口，而且它不是HTML语言元素，所以你无法通过使用css对其进行影响。...，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px...6.缩小viewport 原理是使用meta标签中的viewport， 也就是上面所说的设置viewport， 将整个页面缩小0.5倍， 这个主要是麻烦在其他的元素也要跟着放大一倍再缩小， 为了这个小问题而这样
给所有用户提供同一份 HTML 和 CSS。通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。...首先，它告诉浏览器当解析 CSS 时将设备的宽度作为假定宽度，而不是一个全屏的桌面浏览器的宽度。其次当页面加载时，它使用 initial-scale 将缩放比设置为 100%。...https://codepen.io/cellinlab/pen/GRyXmjx 通过缩放浏览器窗口就能测试标题样式。当窗口很窄的时候，标题是适应移动端的小字号。...也没有必要为小屏幕提供大图，因为大图最终会被缩小。 # 不同视口大小使用不同的图片 响应式图片的最佳实践是为一个图片创建不同分辨率的副本。...如果用媒体查询能够知道屏幕的大小，就不必发送过大的图片，不然浏览器为了适配图片也会将其缩小。 使用响应式技术给不同屏幕尺寸提供最合适的图片。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
对象存储
腾讯会议
云直播
