为移动平台设置样式的网站。为什么一部手机有两个分辨率？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

下手响应式及断点设置分析

在做响应式的时候我们一般有个原则叫做是移动优先还是pc优先，bootstrap采用的是移动优先，移动优先的特点是先考虑设计移动的样式，然后再设置断点一步步向大尺寸添砖加瓦增加样式，所以采用min-width...反过来如果你的业务是pc优先，那默认是pc的样式，兼容到移动的时候就是由大到小，所以采用max-width（这种方式后面的移动端需要重置覆盖默认pc上的很多样式，比较浪费）为什么是这些数字？...至于断点数字为什么是这些数字呢？这里的数字大概有三种，一种是范围的代表如544px，一种是分辨率的代表如768px，一种就是我们布局主体内容的实际宽度如992px和1200px。...使用的第一步复制，这个都问题，但是根本不能体现我们业务的特色。所以到底怎么制定断点，还有待我们进一步讨论，再来两个问题：我们的站点要兼容到哪些平台？用户浏览器分辨率怎么分布？...一般内容较小的站点如小公司网站及个人博客可以采用全兼容响应，因为制作成本相对来说比较低，如imweb就是同一内容兼容所有平台；而一些内容非常多，站点比较复杂的则可以采用pc+平板一套内容，手机单独一套内容

7043 0

下手响应式及断点设置分析

在做响应式的时候我们一般有个原则叫做是移动优先还是pc优先，bootstrap采用的是移动优先，移动优先的特点是先考虑设计移动的样式，然后再设置断点一步步向大尺寸添砖加瓦增加样式，所以采用min-width...反过来如果你的业务是pc优先，那默认是pc的样式，兼容到移动的时候就是由大到小，所以采用max-width（这种方式后面的移动端需要重置覆盖默认pc上的很多样式，比较浪费）为什么是这些数字？...至于断点数字为什么是这些数字呢？这里的数字大概有三种，一种是范围的代表如544px，一种是分辨率的代表如768px，一种就是我们布局主体内容的实际宽度如992px和1200px。...使用的第一步复制，这个都问题，但是根本不能体现我们业务的特色。所以到底怎么制定断点，还有待我们进一步讨论，再来两个问题：我们的站点要兼容到哪些平台？用户浏览器分辨率怎么分布？...一般内容较小的站点如小公司网站及个人博客可以采用全兼容响应，因为制作成本相对来说比较低，如imweb就是同一内容兼容所有平台；而一些内容非常多，站点比较复杂的则可以采用pc+平板一套内容，手机单独一套内容

1.4K7 0

您找到你想要的搜索结果了吗？

是的

没有找到

下手响应式及断点设置分析

在做响应式的时候我们一般有个原则叫做是移动优先还是pc优先，bootstrap采用的是移动优先，移动优先的特点是先考虑设计移动的样式，然后再设置断点一步步向大尺寸添砖加瓦增加样式，所以采用min-width...反过来如果你的业务是pc优先，那默认是pc的样式，兼容到移动的时候就是由大到小，所以采用max-width（这种方式后面的移动端需要重置覆盖默认pc上的很多样式，比较浪费）为什么是这些数字？...至于断点数字为什么是这些数字呢？这里的数字大概有三种，一种是范围的代表如544px，一种是分辨率的代表如768px，一种就是我们布局主体内容的实际宽度如992px和1200px。...使用的第一步复制，这个都问题，但是根本不能体现我们业务的特色。所以到底怎么制定断点，还有待我们进一步讨论，再来两个问题：我们的站点要兼容到哪些平台？用户浏览器分辨率怎么分布？...一般内容较小的站点如小公司网站及个人博客可以采用全兼容响应，因为制作成本相对来说比较低，如imweb就是同一内容兼容所有平台；而一些内容非常多，站点比较复杂的则可以采用pc+平板一套内容，手机单独一套内容

8131 0

01_移动端布局基础

下图是我们需要适配的移动端屏幕设备尺寸，看到这些数据，是不是有一种键盘敲烂的感觉。 1.1 移动端设备移动端设备主要包括 Android、iOS 等手机设备。...单独制作移动端页面优点可以充分考虑到平台的优势和局限性创建良好的用户体验设计网页在移动设备上加载更快单独制作移动端页面缺点移动端网站会产生多个URL（PC端一套URL，移动端一套URL）维护成本会增加...响应式页面缺点制作复杂，同时对于移动端而言，需要加载非常多的 pc 端的样式和图片等资源，影响加载速度，同时费流量。国内流量非常贵。（这也是国内纯响应式网站不多的原因。）...1.2.3 移动Web开发总结现今大型网站，大部分已经没有做响应式了（例如淘宝）。我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。

981 0

前端工程师之移动端布局基础

单独制作移动端页面优点可以充分考虑到平台的优势和局限性创建良好的用户体验设计网页在移动设备上加载更快单独制作移动端页面缺点移动端网站会产生多个URL（PC端一套URL，移动端一套URL）维护成本会增加...响应式页面缺点制作复杂，同时对于移动端而言，需要加载非常多的 pc 端的样式和图片等资源，影响加载速度，同时费流量。国内流量非常贵。（这也是国内纯响应式网站不多的原因。）...1.2.3 移动Web开发总结现今大型网站，大部分已经没有做响应式了（例如淘宝）。我们会发现，淘宝网手机端和网页端使用的是两个域名，也就是说，不同的客户端已经不再共用一套页面布局结构了。...视口能将大分辨率尺寸网页缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。布局视口布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。...vm/vh：vw(view-width)，vh(view-height) 这两个单位是 CSS 新增的单位，表示视区宽度/高度，视区总宽度为 100vw，总高度为 100vh。

751 0

什么是响应式网站？响应式网站建设解决方案

二、响应式网站建设解决方案响应式网站建设是为不同类别的物理设备建立相同的网页（pc、平板、手机、手表等），检测到设备分辨率大小后调用相应的网页，所有的设备都是同一个页面同一个网址，所以响应式网站主要是围绕这些点进行...4、响应式网站UI设计响应式网站UI设计要兼顾手机端适配问题，但是受加载速度、手机浏览器、栅格化系统的约束，UI设计师要根据桌面和平板手机分辨率大小，考虑最大最小响应的屏幕，给出响应的策略设置断点和次断点...，设置多少个断点由网站的内容决定，设置几个断点就需要设计几套UI设计图。...在UI设计过程中，有一些很实际的经验和原则： (1)、尽量保持小屏幕规格样式的简洁：在UI元素风格方面，可以多与前端开发人员交流，尽量采用可以通过CSS3实现的常规风格样式，减少背景图片的使用。...设计目标是创造、统一(跨平台设备统一的用户体验)、定制化(为创新和品牌表达，提供一种灵活拓展的基础)。该标准极大的促进不同设备、流量器之间的浏览切换。

2K4 0

静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

2、设计方法：　　PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；　　移动设备：另外建立移动网站，单独设计一个布局...网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。...，不过是长度或者图片变小了，不会根据设备采用不同的展示样式，流式就是采用了一些设置，当宽度大于多少时怎么展示，小于多少时怎么展示，而且展示的方式向水流一样，一部分一部分的加载，静态的就是采用固定宽度的了...流式布局是用于解决类似的设备不同分辨率之间的兼容(一般分辨率差异较少)；响应式是用于解决不用设备之间不用分辨率之间的兼容问题(一般是指PC，平板，手机等设备之间较大的分辨率差异)。...国外人士非常重视网站的易用性，相当一部分外国站点已经使用em作为字体单位。】

11K3 3

细说网页设计的6大规范

）、MacBook Pro15（2880x1800px）、iMac 27（2560x1440px）等，这些是主流尺寸，如果做网站时建议按主流的分辨率1920x1080px来设计，通常设计网站时的网站宽度为...比如一个网站的内容有5个区块和4个间距，那么如果宽度缩小成900时需要如何变化，这就是自适应布局。 2、响应式网站响应式网站则需要设计不同版本的设计稿，然后根据不同的设备提供不同的 CSS 样式。...比如判定你设备的宽度是750px，那么网站就知道你使用了手机来访问，就会给你导入一份手机才有的样式；如果是电脑的宽度就给你导入电脑的 CSS 样式。...字体方面，我们要把网站的字体全部改为苹方字体，并且字号设置为24PX以上，渲染方式设置成锐利。英文则需要使用 SF-UI 代替。...优化猩SEO：网页设计一定要注重规范，有规范的网页呈现在用户面前会更能体现专业性，同时，网页设计一定要网页的适配性设计，移动端用户的使用用户已经超过了电脑端，绝不能忽视移动端用户体验设计。

3.4K6 0

响应式网站的优缺点

2:SEO友好由于响应网站在不同终端有友好的界面展示效果，用户可以与网站一直保持联系，比如URL不变积累分享；通过单一的URL地址收集所有的社交分享链接最佳化搜索用引擎。...搜索引擎也在变得越来越聪明，它们足够智能可以完成移动网站和桌面网站的连接。3:多个网站只需一个后台即可完成全部网站维护无需额外增加负担。...但是大型网站为了提高用户体验，通常做法，把高分辨率宽屏网站最小的响应尺寸响应到1024px，不再适配手机端，手机端重新设计开发一套手机网站，简单理解为2.5响应，如：电商网站亚马逊、Calvin Klein...3:速度可能会变慢由于响应式页面是同时下载多套CSS样式代码，可能在手机上就下载PC、Pad的冗余代码，导致文件变大，影响加载速度。...4:开发成本较高这个价格预算问题也往往是大家最关心的一个问题，说到这里大家可能觉得奇怪，响应式网站只是一个网站，为什么比手机站与电脑站分开做两个要贵！

6756 0

前端成神之路-移动web开发_流式布局

近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。...iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。 ?...2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的...通过判断设备，如果是移动设备打开，则跳到移动端页面。也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站京东pc端： ? 京东移动端： ?...设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

1.6K2 1

移动web开发_流式布局

近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。...iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。...2.3理想视口 ideal viewport 为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作 meta视口标签的主要目的...也就是说，PC端和移动端为两套网站，pc端是pc断的样式，移动端在写一套，专门针对移动端适配的一套网站京东pc端：京东移动端： 2.响应式页面兼容移动端（其次）响应式网站：即pc和移动端共用一套网站...设置为transparent 完成透明*/ -webkit-tap-highlight-color: transparent; /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式

1.3K1 0

移动端开发的几点建议

获取到它们的真实开发尺寸分别为 960 x 600 1024 x 640，根据分辨率和真实开发尺寸还能得知两个设备的设备像素比分别为 2 和 2.5。如图所示（华为 m5） ?...另外提一下，为手机开发的网站放在其他手机上一般都能适配，但是放在平板上很难适配，毕竟屏幕大小差太多了，反之亦然。...固定高度使用 px 像边框或者分隔线等“固定”高度的，可以使用 px。兼容多端建议使用 px 如果你的网站要兼容多端，例如手机、pad、甚至 pc。...PS：如果一个 app 要应用在手机和平板上，相对计量单位建议使用 rem，这样在手机和平板上可以设置两个不同的根元素字体大小。推荐阅读 rem 栅格化系统的原理以及实现 4....尽量使用移动端专用的 UI 组件库 PC 端的 UI 组件库在移动端上会有很多样式 BUG，如非必要，不要使用。 5.

9892 0

移动web开发

布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题....IOS,Android基本都将这个视口的分辨率设置为980px,所以PC上的网页大都能在手机上呈现,只不过元素看上去很小,一般默认可以通过手动缩放页面....理想视口 ideal viewpoint 为了使网站在移动端有最理想的浏览和阅读宽度而设定....(1/0) 03 二倍图物理像素＆物理像素比物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的.这是厂商在出厂时就设置好的,比如苹果8是750*1334(也就是手机上的分辨率,就是物理像素点...原手机的分辨率是750*1334,由于像素比是2所以上面的375*667是根据像素比已经缩放过的,意思就是只要PC端375*667的盒子就能把整个手机屏幕占满.

2.3K2 1

HTML5响应式布局

什么是响应式网页设计（布局）响应式网页设计(Responsive Web design，通常缩写为RWD)是指：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整...可以说是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。...响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。响应式布局的实现 1....这里有一个很严重的缺点由于PC端和移动终端访问的是同一个网站，PC端可以不计较流量限制，但是移动端不可能不计较。...这里主要是针对于图片的使用，为适配不同终端机型的屏幕宽度和像素密度，我们一般会使用如下方法设置图片的CSS样式： img{ max-width:100%;

2.5K1 0

响应式设计

通过使用几个关键技术，根据用户浏览器视口的大小（或者屏幕分辨率）让内容有不一样的渲染结果。这种方式不需要分别维护两个网站。只需要创建一个网站，就可以在智能手机、平板，或者其他任何设备上运行。...如果一开始就设计一个包含全部交互的网站，然后再根据移动设备的限制来制约网站的功能，那么一般会以失败告终。而移动优先的方式则会让你设计网站的时候就一直想着这些限制。...此外 content 属性还有第三个选项 user-scalable=no ，阻止用户在移动设备上用两个手指缩放。通常这个设置在实践中并不友好，不推荐使用。...在任何媒体查询之前，最先写的是移动端样式，然后设置越来越大的断点。...不支持的浏览器会根据 src 属性加载相应的 URL。这种方式允许针对不同的屏幕尺寸优化图片。更棒的是，浏览器会针对高分辨率的屏幕做出调整。图片作为流式布局的一部分，请始终确保它不会超过容器的宽度。

2.1K1 0

前端响应式布局为什么是个坑？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。...二、响应式设计步骤 2.1、viewport 设置大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度...能够快捷解决多设备显示的适应问题。 4.2、缺点：响应式网站无法区分移动端，所以会出现隐藏部分无用内容，浪费宽度，加载耗时长。...用户在不同终端搜索习惯不同，百度对移动端和PC端的关键词处理策略也不同，百度搜索排名也是有PC和移动端之分的，所以如果要做优化，不建议响应式布局。...建议你的网站最好分别制作移动端和PC端，这样网站性能、用户体验、用户留存相对来说会好很多。大公司它们的网站都是独立的，很少使用响应式布局。

1.8K1 0

前端响应式布局为什么是个坑？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。...二、响应式设计步骤 2.1、viewport 设置大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度...能够快捷解决多设备显示的适应问题。 4.2、缺点：响应式网站无法区分移动端，所以会出现隐藏部分无用内容，浪费宽度，加载耗时长。...用户在不同终端搜索习惯不同，百度对移动端和PC端的关键词处理策略也不同，百度搜索排名也是有PC和移动端之分的，所以如果要做优化，不建议响应式布局。...建议你的网站最好分别制作移动端和PC端，这样网站性能、用户体验、用户留存相对来说会好很多。大公司它们的网站都是独立的，很少使用响应式布局。

9724 0

前端响应式布局为什么是个坑？

响应式设计：Responseive design，就是一个网站，一套代码能在所有终端能够正常展示，并不是为每个终端做一个特定版本，响应式是为解决移动互联网浏览器而诞生的。...二、响应式设计步骤 2.1、viewport 设置大多数移动端浏览器都将html页面的宽度作为可视区的视图以符合屏幕分辨率，所以我们需要利用 meta 设置 viewport ，将网页宽度设为设备宽度...能够快捷解决多设备显示的适应问题。 4.2、缺点：响应式网站无法区分移动端，所以会出现隐藏部分无用内容，浪费宽度，加载耗时长。...用户在不同终端搜索习惯不同，百度对移动端和PC端的关键词处理策略也不同，百度搜索排名也是有PC和移动端之分的，所以如果要做优化，不建议响应式布局。...建议你的网站最好分别制作移动端和PC端，这样网站性能、用户体验、用户留存相对来说会好很多。大公司它们的网站都是独立的，很少使用响应式布局。

9322 0

【总结】移动应用界面设计的尺寸设置及规范

3、设计稿基本元素的尺寸设置为了适应多分辨率的手机，理想的方式是为每种分辨率做一套设计稿，包括所用到的icon、设计稿标注等。但在实际开发中，这种方法耗时耗力。所以通常会选择折中的方法。...d、通知图标如果app有通知，要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ，图形实际区域为 22 x 22 dp 。 ?...5、一点疑问供探讨在720 x 1280 px 的设计稿上，有两个按钮（比如登录、注册）并排一行放置，尺寸均为320 x 80 px ，换算为android开发单位就是 160 x 40 dp 。...作为对照，正文样式在大字号下使用 34 点字体大小作为默认文字大小设置。 – 通常来说，每一档文字大小设置的字体大小和行间距的差异是 2 点。...例外情况是两个标题样式，在最小、小和中等设置时都使用相同字体大小、行间距和字间距。 – 在最小的三种文字大小中，字间距相对宽阔；在最大的三种文字大小中，字间距相对紧密。

3.6K4 0

移动webapp前端开发小结

公司内部有一款企业社交产品share，近期打算开发手机版，初期规划是通过webapp的方式嵌入到另一款即时通信native app。...之前团队还未接触过手机应用的页面重构工作，这次由我打头炮，搭建这款webapp的基本页面样式框架。...content有两个值”yes”和”no”,当我们需要显示工具栏和菜单栏时，这个行meta就不用加了，默认就是显示。..."> 三、响应式设计，自适应多分辨率的移动设备如果我们针对不同分辨率的移动设备匹配同一套CSS样式（比如：字体、图片大小等），最终显示的结果很可能某些分辨率上的效果不错、而其他分辨率的显示效果则会千差万别...了解了媒体查询，我们最先想到的是针对不同分辨率的设备，设置不同的字体大小、图片图标的大小。设置字体大小问题不大，但是一个网站有很多个页面，图片、图标的个数一般有不少。

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭