前端代码的编写永远逃不过“兼容”二词，从前PC时代，因为IE的傲娇，导致程序猿们一直在兼容IE的道路上挣扎，如今移动设备的普及，仿佛让我们看到了希望，仿佛马上就要摆脱IE了，可是！一波还未平息，一波又来侵袭~移动端确实不用考虑IE了，各种CSS新特性也用的爽到飞起，但一座大山压了过来，那就是分辨率的适配，移动端由于展示区域比较小，因此对于页面在不同分辨率手机上的展示细节也要求更加严格，这时像PC端有些固定宽高的布局方式显然不适应，我们被要求对于不同大小手机页面能自适应，真是非常有（tong）趣（ku）呢~ 话不多说，下面就总结了一些移动端常用的适配手法：
是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如说CSS像素)。一个CSS像素对应多少个设备像素是根据当前的缩放比例
viewport是网页默认的宽度和高度， 上面这行代码的意思是：网页宽度默认等于屏幕宽度（width=device-width）， 原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。
1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见与pc端。 2、设计方法： PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分； 移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
杨小杰带来网站搭建技术教程相关页面' style='color:red;'>技术教程，现在为大家分享一篇关于如何做一张属于自己的自适应网页的文章，相信看完这篇文章后，你就能给自己来一个漂亮的自适应了！
随着3G的普及，越来越多的人使用手机上网。 移动设备正超过桌面设备，成为访问互联网的最常见终端。于是，网页设计师不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？ 手机的屏幕比较小，宽度通
前言 📷 随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。 特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta: 简单事情简单做-宽度自适应 所谓宽度自适应严格来说是一种
无需任何依赖,即可运行。由十月（Oct.cn）开发维护，全局使用flex布局，自适应兼容性强。PC和移动端都可使用,样式精美,可自定义动画/颜色/字体等
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 常见的适配方案 百分比+固定高度布局方案 固定屏幕为理想视口宽度 少许的媒体查询设置字体 水平百分比布局 水平方向部分也可以使用弹性布局 Rem解决方案 Rem的大小取值：根据页面的dpr动态改变 Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设
随着移动设备的普及，移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁，手机厂商繁多，导致的问题是每一台机器的屏幕宽度和分辨率不一样。这给我们在编写前端界面时增加了困难，适配问题在当下显得越来越突出。记得刚刚开始开发移动端产品的时候向设计MM要了不同屏幕的设计图，结果可想而知。本篇博文分享一些卤煮处理多屏幕自适应的经验，希望有益于诸君。
flexible会为页面根据屏幕自动添加标签，动态控制initial-scale，maximum-scale，minimum-scale等属性的值。
一般是想通过各种方式来实现弹性图片的效果，在实现原理中也提供了几种方案，这里具体说明
在移动端viewport视口（pc端没有这个概念）就是浏览器显示页面内容的屏幕区域。
0. 前言 手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者
CSS布局 确定页面的大致结构，页面分多少块，每块的位置。每个部分怎么把该部分撑起来。 * 早期以table为主(简单) * 之后 以技巧性的布局为主(难) * 现在有flexbox/grid(偏简单) * 响应式布局 在移动端大行其道的时代 是必备的 * table表格布局 * float浮动 + margin * inline-block布局 (用起来方便，但是小问题较多) * flexbox布局 盒模型 如下图所示： 宽度和高度 指的是content的宽度和高度 margin指的是 距离上一个元素
如果页面的宽度超过了640px，那么页面中html的font-size恒为100px。否则，页面中html的font-size大小为：100*（当前页面宽度 / 640）。
听说糙着干活的只靠 px 和 % 闯天下，不知道在看文章的你是不是也是其中一员，哈哈哈哈
最近，端内在做 webView 统一的时候，个性签名中的 WebView 替换为 CustomWebView 之后，发现字体突然变小。
写在前面的话：随着移动设备的逐渐普及和Web技术的发展，跨端的Web开发需求将会越来越大。如何在多种设备上进行跨端的界面适配呢？我们可以利用CSS3的Media Query来实现。本文主要介绍了移动开
嗨，我又来了，话说可以简单聊聊为什么会出这款主题，端午节假日在家，孩子午睡时间自己更新完主题之后网上冲浪，偶然间看到很多工作室和小微企业的网站，有些真的惨目认读，杂乱无章，瞬间灵感迸发，赢天下主题模板也就应运而生（怎么感觉跟写小说是的呢），说人话就是弄了一款小微企业主题，助力企业成长，以最少的资金获得最好的服务，毕竟现在的企业网站建设都是3-5K起步，万八千的也不少，更何况还有几千万搭建商城结果还运行不了的，悲伤的表情.gif。
就当写一篇随笔吧~上星期还在做加盟模块(兼容微信端)，这星期已经加班做快递扫码模块(react+node)，所以我感觉只有弹药备足了才能稍微轻松些应对各种需求。实话说在同个部门的大佬面前差距确实大，如何判断差距呢？我的观点是一是效率，二是质量。Fe这行，如果给你个需求写出个怎么怎么样的界面，我觉得任何人学几个星期肯定都会了，但是能否完成一个具有大局观的界面呢？包括兼容性、自适应，最重要的是扩展性如何呢？(js的封装、抽离，图片、css、js的压缩等等)。部门一些大佬的代码习惯很有个性，但是让人看起来是非常友
<link href="assets/plugins/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
但是最近有朋友使用flexible.js插件，但是不管切换什么设备，data-dpr的值始终为1。
手机市场日渐丰富的同时，给我们前端开发人员带来的网页内容自适应屏幕尺寸进行显示的问题也日渐凸显出来。原本可能通过百分比/媒体查询等简单手段就可以常见的适配问题，但是对于页面有复杂结构或者视觉上有特殊要求的，就需要通过其他手段来解决了。
先看看 rem 兼容性（基本上所有主流的浏览器都支持）-https://caniuse.com/#feat=rem
随vue技术逐渐成熟，开发者们热爱的脚手架vue-cli也一步步升级优化。在体验度不断上升的过程中，也必不可少的要踩一些坑。 本篇主要记录下在vue-cli2.x升级到3.x以及用Mac系统的踩坑记录。
一直想着用bootstrap搭建网站，它的自适应、元素封装完善、现成的Glyphicons字体图标，省去很多的css、js、ui的工作，可以快速搭建一个客户需要的站点。ytkah自己有一些div+css的基础知识，所以上手bootstrap相对会比较快一些，从入手到完成项目只用了两周“学会”bootstrap搭建一个企业站，中间还有其他的一些事需要处理。当然做得比较粗糙，效果图在文章尾部。 国内的企业站一般都喜欢这样的版式：头部导航、幻灯片banner、次导航、文章列表、tag标签、转化引导、主业分
1. 自我介绍 2. 项目经验，我说项目名说错了，然后又说了一遍，面试官不知道什么心态的鬼魅一下 3. Html5不同于以前版本的特点 4. Html5新增api 5. Html新增的存储结构 6. Canvas绘画的基本过程 7. Section这一类标签的作用，为什么不直接用div，回答html语义化 8. 盒模型，怎么转化为ie8标准下的显示形式 9. 代码实现左边div宽度为100px，右边自适应的布局 10. Css的选择器，权重比较以及权重计算规则 11. 分别解释一下cookie、sessio
rem 是基于 html 元素的字体大小来决定，而 em 则根据使用它的元素的大小决定,一般被称为相对长度单位,是根据它父元素的字体大小来计算的，一般默认情况下：16px = 1em
Less（LeanerStyle Sheets 的缩写）是一门 CSS扩展语言，也成为CSS预处理器。
1.2.1 重要的图片用img标签（例如头部banner等包含特定信息的内容图片），不重要的底板用背景形式显示，例如底部背景
1、H5页面（APP端） 1.1 APP端页面用HTML5制作，头部需要加适配信息： <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta name="format-detection" content="telephone=no" /
TML5学堂：移动端H5知识普及 - fixed定位模式与其他。虽然知识小，但是不得不承认的是，它们很重要~！ 本文会讲解到fixed的定位模式，另外，关于line-height的细节知识也会在这里提到。另外就是给出网络字体的相关知识，并扯扯美工图设计的基准字体。 先要说的话 首先本篇会讲解到fixed的定位模式，另外，关于line-height的细节知识也会在这里提到。另外就是给出网络字体的相关知识，并扯扯美工图设计的基准字体。也算是移动端H5知识这个系列的收尾吧~ fixed定位模式 position：
rpx单位是微信小程序中css的尺寸单位，rpx可以根据屏幕宽度进行自适应。官方推荐微信小程序可以用iPhone6 作为视觉稿的标准。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为750 px，则共有个750 物理像素，则750 rpx = 375px = 750 物理像素 例如 : 1rpx = 0.5px = 1物理像素
会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动
移动开发的世界在不断变化，随之而来的是对能够适应任何设备或方向的用户界面的需求。React Native 提供了一套丰富的工具来构建这样的需求。
本文接上一篇 🚀秒开时代：博客性能优化指南 ， 由于性能优化后把一些功能弄的不好使了，这次把那些功能异常问题排查一下，顺便再整理一下代码，同时把页面效果稍微优化一波，本文主要为实操记录分享
前端总结 html 字体图标的引用 添加到项目 项目下载到本地 加font文件夹,将字体文件放进去 将css文件加入到link中 雪碧图 先用一个 span 标签 将span标签display:inline-block 设置图标的background-position 外边距合并的问题 父元素没有边界线, 无法构成盒子模型 此时调子元素的margin值, 父子元素都会改变出错 解决方法: 给父元素加属性 overflow:hidden; 标签 for 属性应当与相关元素的 id 属性相
来源：子慕大诗人 http://www.cnblogs.com/1wen/p/6839779.html 今天我讲的主题是css，具体聊一下我大概的css学习历史，分享一些干货，希望这次分享对大家有所启发和帮助。 个人的css历史 说说自己的css学习的历史，12年，当时是老师手把手1对1教我div+float的固定布局，所有元素全部用float，做了学生会网站的全部前端页面，因为有段时间学PS比较多，也是自己做的UI，很丑，老师说第一次做成这样很不错了，那时老师就觉得我有做前端的天赋，我就是从这个时候开始接
图表中, 其实有很多元素都是有两种状态的, 一种是默认状态, 另外一种就是鼠标滑过或者点击形成的高亮状态. 而高亮样式是针对于元素的高亮状态设定的样式
随着互联网的深入发展，前端开发工程师已成为市场上极具竞争力的人才。许多学生，包括以前的UI，java，或完全零基础，想学习的前端。那么话不多说，直接上干货，希望能帮助到大家。
每种媒体类型都有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格，暂且了解三个，注意他们要加小括号包含
我给DouWeather（后称DW）的定位是网页小组件，也是出于这个考虑，我参考了如iOS系统的小部件、新版MIUI系统小组件、鸿蒙系统小部件、win11小组件，发现都无一例外具有同一特征：扁平化，圆角，选用无衬线字体，元素风格简洁，并且四者都在或背景或图标中大量使用渐变，使小部件表现得较为灵动。其中win11小部件添加了浅阴影，可能是为了让小部件从亚克力背景中凸显出来。
主题介绍 轻盈美观 - 使用 Argon Design System 前端框架，细节精致，轻盈美观 高度可定制化 - 可自定义主题色、布局(双栏/单栏/三栏)、顶栏、侧栏、Banner、背景图、日夜间模式不同背景、背景沉浸、浮动操作按钮等，提供了丰富的自定义选项 夜间模式 - 支持日间、夜间、纯黑三种模式，并可以根据时间自动切换或跟随系统夜间模式 功能繁多 - Tag 和分类统计、作者链接、额外链接、文章字数和预计阅读时间、文章过时信息显示 Pjax - 支持 Pjax 无刷新加载，提高浏览体验 友情链接
比如，根元素（html）设置font-size=12px; 非根元素设置width:2rem; 则换成px表示就是24px。
这两个都是font-style属性的值，这两个值都能实现倾斜的效果，但是有区别的。
本期给大家在webpack5中如何配置css用到的解析和插件的使用，更准确的说是PostCSS的插件。众所周知，现在大部分前端项目都在使用webpack做打包，打包做解析的比较重要目的一个是给js做转化，比如es6转es5，混淆压缩等。然后就是对css进行解析，比如说scss转css，less转css，前缀自动补全，还有移动端项目px转rem或者px转vw。今天我们就介绍将后者其中的前缀自动补全，px转rem，px转vw，这都是在PostCSS中极为常用的插件。
z-index 属性设置元素的堆叠顺序，拥有更高的堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
