pc端为什么用1440宽度设计

2024-10-28

如何使用蓝湖设计稿同时适配PC及移动端

如何使用蓝湖设计稿同时适配PC及移动端项目需求: 一套代码同时适配PC及移动端方案: pc端采用px布局,移动端采用rem布局,通过媒体查询(media query)切换坑: 尝试过使用postcss-pxtorem来自动将px转换rem, 只能满足移动端,无法同时适配PC及移动端,感觉PC端还是使用固定像素px来布局好一点 PC端设计稿尺寸1920*1080 为了设备不同分辨率的屏幕,可选择将设计稿宽度设置为1440 采用固定尺寸,固定字体,伸缩布局如果是官网类的网站,采用固定宽度(

关于移动端和PC端的交互的区别

对于现在的移动端设备的普及,移动端上的用户体验成了一个重要的关注点. 看了一些网上的关于移动端的交互和用户体验的知识,这里总结了一些.若有不足的地方,希望大家能够积极补充. PC端和移动端的产品的设计区别屏幕与适配的问题考虑: 操作系统(windows,mac,android,iOS等)的区别: 网络环境(并不是每一个移动端设备随时随地都有网络): 使用场景(站着,坐着,躺着,蹲着,趴着,走着等等): 传感器的使用(摇一摇功能,地图实时导航,语音输入等): 操作方式不同(PC端是点击,移动端是

如何解决PC端和移动端自适应问题？

做网页时,我们通常需要考虑到不同电脑屏幕尺寸,以及不同手机屏幕大小等问题,解决样式发生改变的情况,那么如何解决呢?现在主要是采用自适应来解决高度,宽度的,以及图片自适应问题,下面就PC端和移动端来总结一下,通常进行自适应高度和宽度,图片时,一般与页面的布局存在关系. 1.最小尺寸分辨率1024*768(传统17寸显示器),则可以采用940px.960px.或者常用的980px作为最小宽度 2.1024*768之后稍大的分辨率就是1280*768了,则可以采用1200px或者1220px作为稍大的

PC端自适应布局

截止目前,国内绝大多数内容为主的网站(知乎,果壳,V2EX,网易新闻等)均使用内容区定宽布局,大多数电商网站(网易考拉,京东,聚美优品)也使用了内容区定宽的布局,也有些网站使用了自适应布局: 天猫内容区采用媒体查询+定宽,在达到某个断点之后更改内容区的宽度,并把某个内容显示/隐藏. 注意热门市场这里,虽然每一个方块的宽度是随着断点变化的,但是左上角的标签和里面长方形的白色区域在所有的屏幕下都是定宽度的,但是也可以完美的适应不同的屏幕: 淘宝内容区也是采用了媒体查询+定宽: 达到某个节点之后

第 31 章项目实战-PC 端固定布局[3]

学习要点: 1.搜索区 2.插入大图 3.搜索框主讲教师:李炎恢本章主要开始使用学习用 HTML5 和 CSS3 来构建 Web 页面,第一个项目采用 PC 端固定布局来实现. 一．搜索区本节课,我们接着 header 头部往下,来设计一块搜索区.这个区域,可以是广告大图,也可以是用户注册,也可以是一个搜索条,都是一个大幅背景,内嵌一个表单.具体造型如下: 从表面上来分析,就是插入一张背景大图,然后居中一个搜索条.但是,我们要求最小在 1280 分辨率.最大在 1920 分辨率能保持最佳的

第 31 章项目实战-PC端固定布局[1]

学习要点: 1.准备工作 2.创建项目 3.网站结构 4.CSS选择器 5.完成导航主讲教师:李炎恢本章主要开始使用学习用HTML5和CSS3来构建Web页面,第一个项目采用PC端固定布局来实现. 一．准备工作 1.为了达到最低效果,第一个项目将采用1440x900的分辨率录制:因为,1024根本无法容纳最低宽度的页面:页面采用1280的最低宽度设计,去掉滚动条为1263像素. 2.第一个项目是PC端的固定布局,会采用像素(px)单位. 3.项目素材图片,是课外独立设计好的,课程不会去设计

探讨兼容IE低版本的PC端响应式布局

http://www.jiangweishan.com/article/lowIeResposive.html 响应式布局,oh my god!!有点醉了,感觉是老生常谈的话题了.虽然已经谈过很多了,但这次也很有必要拿出来探讨下.为什么呢?往下看呗... 最近在折腾公司首页的改版,设计师设计了三个版本,宽度分别为1600px,1200px,960px.看到这三个尺寸的设计,很明显需要做PC端的响应式,我们都知道针对IE9+和其他高富帅浏览器的响应式,使用Media Query轻松搞定.至于I

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全

(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全时间:2015-08-17 16:50:40 阅读:3961 评论:0 收藏:0 [点我收藏+] 标签:style 代码 si sp bs im c res on PC端按屏幕宽度大小排序(主流的用橙色标明) 分辨率比例 | 设备尺寸 1024*500 (8.9寸) 1024*768 (比例4:3 | 10.4寸.12.1寸.14.1寸.15寸; ) 1280*800

pc端布局的一点思考

编写pc端页面需要注意些什么? 1.自适应最小屏幕,在小屏幕上样式不能错乱. 在桌面屏幕各分辨率使用比例中可以看到各桌面分辨率的使用比例,日常pc端开发我们会考虑到适配1024宽度大小的屏幕. 对于管理系统,设置内容宽度最小为1024,这样当屏幕小于1024时,保证样式不会乱. 2.自适应更大的屏幕. 如果需要适应刚好一屏的页面,用百分比来设置元素宽度,而不是写死设计师给的宽度. 3.设计师都是参照某个尺寸来设计的设计稿. 比如我们的设计师在设计pc端的管理系统的页面是参考的1440px的屏幕宽

自适应PC端网页制作使用REM

做一个PC端的网页,设计图是1920X1080的. 要在常见屏上显示正常(比例正确可) 1280X720 1366X768 1440X900 1920X1080 使用了几种办法 1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.使用rem的地方 width,height,margin,padding,left top都采用了REM, HTML的FONT-SIZE设置的为100PX.是为了计算方便

PC端、移动端的页面适配及兼容处理

转自一.关于移动端兼容性目前针对跨终端的方案,主要分为两大阵营:一套资源Vs两套资源. 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端: 第二种是通过终端判断分别调取两套资源以适配所有终端. 这两种思路我们并不能斩钉截铁的说哪一个更优选,正所谓”合适的才是最好的”. 思路一:通过响应式或页面终端判断去实现一套资源适配所有终端优势:只需维护一套资源,维护成本较低. 劣势:需加载适配各个终端的各个资源,在不同终端通过响应式布局实现不同展现,部分交互效果需要在页面中做终端判断,代价较

pc端常见布局样式总结（针对常见的）

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 宽度适配 */ html, body { width: 100%; overflow-x: hidden;/* 外层盒子设置最小宽度的话看不到横向滚动条 */ } /*1. pc端适配的需求:目

pc端常用电脑屏幕（(响应式PC端媒体查询)电脑屏幕分辨率尺寸大全）

简述移动端与PC端的区别

1.移动端与PC端的区别 PC考虑的是浏览器的兼容性,而移动端开发考虑的更多的是手机兼容性,因为目前不管是android手机还是ios手机,一般浏览器使用的都是webkit内核,所以说做移动端开发,更多考虑的应该是手机分辨率的适配,和不同操作系统的略微差异化: 在部分事件的处理上,移动端多出来的事件是触屏事件,而缺少的是hover事件. 另外包括移动端弹出的手机键盘的处理,这样的问题在PC端都是遇不到的: 在布局上,移动端开发一般是要做到布局自适应的: 在动画处理上,PC端由于要考虑IE的兼容性

PC 端响应式布局

前言:PC端电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显示.不像官网那样两边有一个安全尺寸. PC端的宽度相差太大,一般是常用响应式的布局(布局改变了,不仅仅尺寸变化):而不是像移动端那样,通过rem单位,只是改变了元素的尺寸. 一.栅格系统:(栅格系统是比较好的一种响应式布局,框架已经帮我们处理好了,只要配置下就可以自动实现响应式的布局) 1.栅

PC端页面适应不同的分辨率的方法（转载）

原文地址:https://blog.csdn.net/fengzhen8023/article/details/81281117 上周完成一个PC端的项目,对于我这样的小白来说,这个项目里面最大的问题就是,如何做到让HTML页面适应电脑的不同分辨率. 通过师傅的指导和自己查阅资料,最终成功适配不同的分辨率,完成了这个项目. 现在回头再来看这个项目,突然发现适配不同的分辨率真的非常简单.这里总结两种方法,跟大家分享一下.希望可以帮助大家快速完成自己的项目. 一.根据不同的分辨率,加载不同的CSS样

pc端适配移动端

pc端和移动端共用一套代码 1. 允许网页宽度自动调整在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 所有主流浏览器都支持这个设置,包括IE9.对于那些老式浏览器(主要是IE6.7.8),需要使用css3-mediaqueries.js 2. 不

使用rem配置PC端自适应大屏

效果如下使得大屏不论在什么宽高比例依然能展示全部数据安装 npm install -S postcss-pxtorem rem配置思路原先的rem函数是能解决大部分的问题的,如果展示不全,也可以用滚动条. 但是大屏展示又不能使用滚动条,又必须展示全部的内容,这个时候就需要改变原来的计算方式,需要根据屏幕的实际高度来计算对应的屏幕宽度 1. 配置rem.js文件 rem.js可以放在src文件夹下,我是放在src下的utils文件夹中初始的rem配置 // 设置 rem 函数 functi

HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型

本教程案例在线演示有路网PC端有路网移动端教程配套源码资源教程配套源码资源 div div 可定义文档中的分区(division). div 标签可以把网页分割为独立的.不同的部分. 可以看成以下结构: div不像 h1,p标签,没有任何默认样式,其主要作用是标识网页上的某块区域.常见做法是通过给div元素加上id或class,然后通过css选中某个div,对其进行样式美化. <div class="demo">我是一个div</div> <sty

基于React.js网页版弹窗|react pc端自定义对话框组件RLayer

基于React.js实现PC桌面端自定义弹窗组件RLayer. 前几天有分享一个Vue网页版弹框组件,今天分享一个最新开发的React PC桌面端自定义对话框组件. RLayer 一款基于react.js开发的PC端自定义Layer弹出框组件.支持超过30+参数自由配置,通过轻巧的布局设计.极简的调用方式来解决复杂的弹出层功能,为您呈上不一样的弹窗效果. RLayer在设计开发之初有参考之前的VLayer组件,尽量保持功能效果的一致性. 如上图:展示一些常用的基础普通型弹窗功能. 极简调用方式

PC端页面转换成手机端页面的分辨率问题的理解

PC端页面转换成手机端页面的分辨率问题的理解 px vw rem 假如就以a4纸模式为设计图 ,在a3纸模式中设计,然后设计出来展示在不同的a4纸模式上通常是 750px -> 100vw / 750px = 1.333333 rem 是转换了多大纸面积就展示多少相对的模式 , 因此, 不但能使 a3 以a4模式设计不出问题,还能让 a3 设计出的东西, 在任何a4 模式下的样子比例不变. vw - 1vw = 1%视口宽度设计图的宽度是 750像素 1125像素视口的宽度是 100vw

pc端为什么用1440宽度设计

热门专题