上周完成一个PC端的项目，对于我这样的小白来说，这个项目里面最大的问题就是，如何做到让HTML页面适应电脑的不同分辨率。通过师傅的指导和自己查阅资料，最终成功适配不同的分辨率，完成了这个项目。现在回头再来看这个项目，突然发现适配不同的分辨率真的非常简单。这里总结两种方法，跟大家分享一下。希望可以帮助大家快速完成自己的项目。一.根据不同的分辨率，加载不同的CSS样式文件这个方法的思路是，分别针对80
关于对Web前端的学习，众所周知，基础知识需要牢牢掌握。项目经验需要大量积累，二者缺一不可。然而提到切图对Web前端开发的影响，却鲜有人知。下面，千锋就相关切图问题给大家做下系统地梳理。 首先，我们先来简单了解下切图的历史。Web 2.0的时期，最流行的趋势就是大字体、鲜艳色、高光和倒影，甚至许多人没有自己的想法，盲目去追求，致使Web 2.0的网站变得千篇一律。这时有一些前卫的人，把平面设
遇到的问题：1：如果给设计稿是1920*1080，和750*1334设计稿你怎么做适配2：怎么合理使用rem,%3：在pc端怎么适配各种大小不一的尺寸电脑4：当页面在刷新出现那么一瞬间样式没有渲染，1秒后又好的情况怎么处理5：使用最小尺寸电脑通常限制到1200 第一：在pc端适配，限制最小尺寸1200保证样式不乱，文字很大的情况下使用rem适配， &
目也pc端有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。适配目标：1.在不同分辨率的电脑上，网页可以正常显示2.放大或者缩小屏幕，网页可以正常显示对于宽度的适配 对于宽度适配：首先设置html,body{width:100%;overflow-x:hidden;}然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都
转载
2024-04-22 22:45:11
814阅读
兼容屏幕分辨率的几种布局方式 开发很多的项目是针对于不同的屏幕都要兼容的，一般是19201080，最低有时候需要支持到1024768，因此需要在布局上有一些适应屏幕的方式。有多中方式。1 最基本的是所有都卡死px，这样的话，当屏幕过小时，会出现滚动条，可以拖动显示。全都使用px的方式，不会受到屏幕的影响，当屏幕过小时可以拖动滚动条显示，但是效果很不好，有时候想在页面上看一个内容，还需要拖动滚动条
作者：邓海贝 分辨率对于图片的清晰度和文件大小都有着重要的影响，设计时选择合适的分辨率，既能保证图像质量，又能提高工作效率。然而你的分辨率真的设置对了吗？使用PS等位图软件开始设计时，新建文件就需要设置好分辨率。在AI、CDR等矢量图软件虽然在新建文件不需要设置分辨率，但是在导出jpg、png等位图格式时也需要设置对应的分辨率。那么如何合理的设置分辨率？表示图像分辨率的方法有很多种，这主
一.根据不同的分辨率，加载不同的CSS样式文件这个方法的思路是，分别针对800、1280、1440、1600、1920等分辨率，创建不同的css文件。然后在各种分辨率下，写css样式表。可能你会感觉针对一个页面，要写这么多不同的css样式表，这个工作量肯定很大。其实也不尽然，根据我在这个项目中的实践，发现这个工作量其实是比较小的。首先，我们在做项目的时候，一般情况下会有一些范围限制，比如这个项目只
rem适配方案 作用： 让一些不能等比自适应的元素，达到当设备尺寸发生变化的时候，等比例适配当前设备 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配rem实际开发适配方案1rem + 媒体查询 + less技术1、 设计稿常见尺寸宽度设备常见宽度iphone45640pxiphone6787
转载
2024-04-02 15:29:11
519阅读
适配器模式定义：适配器模式将一个类的接口，转换成客户期望的另一个接口。适配器让原本接口不兼容的类可以合作无间。两种实现方式：对象适配器 ,使用组合关系来实现类适配器 ,使用继承关系来实现。到底该如何选择使用哪一种呢？判断的标准主要有两个，一个是 Adaptee ( 被适配 ) 接口的个数，另一个是 Adaptee 和 ITarget 的契合程度。如果 Adaptee 接口并不多，那两种实现方式都可
目也pc端有适配的需求：目前我们pc项目的设计稿尺寸是宽度1920，高度最小是1080。适配目标：1.在不同分辨率的电脑上，网页可以正常显示2.放大或者缩小屏幕，网页可以正常显示对于宽度的适配 对于宽度适配：首先设置html,body{width:100%;overflow-x:hidden;}然后我们可以把页面分解为背景层(一般宽度都会大于1200px)和内容层(一般宽度都会小于120
转载
2024-04-16 13:27:26
370阅读
背景如何按照设计稿中标注的尺寸，直接写页面的样式，不再需要px2rem这样的工具或者人工转换 ? 只要你明白了rem的计算原理，这个问题的答案超级简单。根字体大小计算核心原理 设备的根字体大小 * 全屏比例值设计稿的根字体大小 * 全屏比例值这两个等式中的全屏比例值相等的条件下，在真实设备上可以高保真地还原设计稿。实战一下找了一个蓝湖的设计稿，蓝湖的设计稿宽度是750
转载
2024-03-22 13:59:37
790阅读
rem的用法rem 相对于根元素字体大小的单位，它是一个相对单位。通常可以有两种方法，第一种是结合媒体查询来做。 第二种是 js 方法。一：媒体查询：使用媒体查询，来控制不同屏幕下的html的字体大小即可。假如一个需求：有个设计图750，在这个图纸上有个div，量出来是 :200px * 200px; 首先我们可以考虑将750的设计稿分为15份（当然那也可以分成10份，这个随意，我为了好计算。），
转载
2024-06-19 07:57:10
309阅读
第一次在这里发博客，还不太熟练。希望能记录下自己的学习和成长过程。欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，
在现代科技时代，我们被各种高清视频内容包围着，例如电影、电视节目、游戏等。当我们购买新的电视或者观看在线视频时，常常会遇到两个常见的分辨率选项：1080p和720p。本文将详细比较1080p和720p之间的区别，帮助您理解它们的优势和劣势，以便在选择电视或观看内容时做出明智的决策。1080p和720p的定义首先，我们需要了解1080p和720p的定义。1080p：1080p是高清视频的一种常见分辨
一、rem 适配基本概念：
对于移动端的开发，rem 适配必不可少，我们可以用多种方式实现， 根据 html 的 fontSize 属性值为基准，其它所有的 rem 值，根据这个基准计算。我们根据屏幕宽度用 js 动态修改了 html 的 fontSize 属性值，达到移动端适配的目的。
二、布局方案： &
话说从设计稿到前端页面实现，是产品流程中非常重要的一环，这个阶段决定了设计师设计的设计稿能否完美地变成真正的产品雏形。废话不多说，本文主要介绍以下三块内容：移动设备尺寸；前端适配方案；设计师与前端如何对接。移动设备尺寸网上专门讲解移动设备尺寸的文章很多，事实上，移动设备种类之多简直是噩梦一般。所以，实际在设计或者开发过程中，往往只是选择几种设备作为基准来进行设计和开发，而对于其他情况，则采用一些
设计模式之Strategy——简历篇
表弟马上就要大学毕业，找工作要写简历（Resume），因此他就来问我关于这方面的问题。我告诉他最好写两种类型的简历，一种是用中文写的，一种是用英文写的，如果是国企的话，就投中文简历（ChineseResume），如果是外企的话，就投英文简历（EnglishResume），嘿嘿，原因在这里就没必要多说了吧。
转载
2024-09-03 11:33:24
35阅读
文档流定位流、浮动流、普通流三种普通流(Normal flow)在常规流中，盒一个接着一个排列，也就是常说的默认的文档流在块级格式化上下文里面， 它们竖着排列在行内格式化上下文里面， 它们横着排列当position为static或relative，并且float为none时会触发常规流对于静态定位(static positioning)，position: static，盒的位置是常规流布局里的位
rem布局非常简单，首页你只需在页面引入这段原生JS代码就可以了
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWi
———— / BEGIN / ————PS：本文适用于移动端，Axure软件制作的文档型交互稿。交互稿应该包含哪些内容？如何搭建一个合理的交互稿结构？各个界面应该如何摆放？清晰易读的设计说明应该是怎样的？作为一个新人，很难完全弄清上面的问题。其实想要画出一份合乎规范的交互稿并不难，只需找前辈的稿子参考一下就能习得十之六七。但由于设计稿大多涉及企业机密，有着较强的产权属性，所以一般很难接触到。今天笔
