pc端响应式布局

最新推荐文章于 2024-05-01 20:50:37 发布

颜仙

最新推荐文章于 2024-05-01 20:50:37 发布

阅读量580

点赞数 2

文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_60266866/article/details/126777738

版权

// 大于800px

@media only screen and (min-width: 800px){

.homecontainer{

font-size: 1vw;

.subdiv{

width: 100%;

display: flex;

justify-content: space-around;

font-size: .5em;

.left{

width: 48%;

height: 100%;

font-size: .8em;

}

.right{

width: 48%;

height: 100%;

font-size: .8em;

}

// 小于800px

@media only screen and (max-width: 800px){

._homecontainer{

font-size: 1vw;

._subdiv{

width: 100%;

display: flex;

flex-direction: column;

// justify-content: space-around;

font-size: .5em;

.left{

width: 100%;

height: 100%;

font-size: .8em;

}

.right{

width: 100%;

height: 100%;

font-size: .8em;

}

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

颜仙

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

用css实现pc端响应式布局

chengxue_123的博客

11-12

1810

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>响应式布局</title> <style> * { mar.

pc端响应式布局之rem

weixin_44387746的博客

06-16

967

1920的屏幕1rem=100px (function (win) { var tid; function refreshRem() { let designSize = 1920; // 设计图尺寸 let html = document.documentElement; let wW = html.clientWidth; // 窗口宽度

1 条评论您还未登录，请先登录后发表或查看评论

PC端响应式布局

c_qianxia5040的博客

06-30

1861

只需要在需要响应式布局的页面添加下面的方法即可,在react或vue的脚手架中只需要在index.html文件中添加改方法就可以实现全局响应式布局了(因为react和vue都是单页面)

响应式布局

weixin_56164426的博客

03-22

786

各种布局场景1. 纯PC端布局布局区域是固定的 950 - 1200 样式的兼容2. 纯移动端布局屏幕尺寸兼容 rem vh vw弹性盒子flex怪异盒模型3. 响应式布局 PC-》移动自由切换流式布局宽度变为百分比实现页面的快速缩放能够检测屏幕尺寸大小，在不同的屏幕尺寸范围内，给界面中的标签盒子，设置特定样式常见设置的三类样式盒子宽度的百分比值盒子的出现和消失盒子中字体大小的配置 rem单位UI设计规范中的屏幕尺寸范围移动端（手机-》ipad）<768px 以下 -xs。

PC端 VUE 官网项目前端开发 响应式布局（宽+高等比例缩放）

weixin_55846296的博客

08-01

7018

各位大佬有好方法或者想指正的可以在评论去告诉我们，大佬们辛苦了（抱大腿）！！！

响应式布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）

weixin_33968104的博客

06-20

1832

简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出发，分析了px在移动端布局中的不足，接着介绍了几种不同的自适应解决方案。 px和视口媒体查询百分比自适应场景下的rem解决方案通过vw/vh来实现自适应一、px和视口在静态网页中，我们经常用像...

响应式布局及案例练习

YY的博客

10-07

697

@media screen and (orientation:portrait)、 @media screen and (orientation:landscape)、@media screen and (max-width:768px)

响应式布局的简单案例

09-24

响应式布局是一种网页设计技术，它能够确保网页在不同设备上具有良好的显示效果，无论是在桌面电脑、平板电脑还是手机上，用户都能获得满意的浏览体验。一个优秀的响应式布局应当能够让网页内容自动适应不同的屏幕...

PC端常用响应式布局总结（以后建门户类的直接看这篇）

xwc999

10-08

1231

1.常见的固定宽度范围是1004px到1280px之间,再结合你的页面布局，如下例子中子盒子直接使用vw宽度进行布局。规则，我们可以根据不同的屏幕宽度为页面应用不同的样式。可以根据屏幕尺寸动态设置根元素的字体大小，而。可以自动将像素单位转rem。

响应式布局(PC与手机访问的兼容性)详解

09-26

响应式布局是解决PC端网页和手机端显示网页的布局问题。

响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架

05-06

响应式css+兼容手机+平板+电脑PC 拼图跨屏响应式布局前端开发CSS框架-综合示例

浅谈pc和移动端的响应式

weixin_34050389的博客

01-03

291

身为一个前端攻城狮，是不是经常遇到各种各样的响应式问题？下面我们来说一下： 1.响应式跟自适应有什么区别? 有些人可能还不知道响应式跟自适应的区别,甚至认为他们是同一个东西,其实不是的. 自适应是最早出现的，后面才有了响应式。响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。如下图所示，对于同一个页面（图中的Html），如果用响应式布局来处理的话，用不同设备（电脑、平板、手机...

响应式布局精细清晰讲解教程

winkexin的博客

05-10

473

上面提到的几种常见要素的适配规则，是以最小颗粒度说明的，实际产品设计中会遇到很多复杂的组件，可能是图片+文字，可能是卡片+文字+图片等异形组合，遇到的时候不要慌，先分析组件里的最小元素的适配规则，然后再通过各元素的大小、形状、数量、位置变化合并成一套适配方案。总之，灵活运用，效果为大。此种适配规则是目前客户端和 web 最常用的适配规则，这种方式可以保证在一定窗体尺寸下，用户能尽可能多地获取信息，极大提高了屏效，也可以规避超过某个窗体尺寸后，内容区域无限拉伸造成的视觉动线过长进而引起视觉疲劳的问题。

PC端移动端不同屏幕大小下响应式布局

whiteGay的博客

10-23

596

先上效果图： PC端效果：移动端效果：代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta nam...

Vue：PC端全局响应式布局

qq_41241767的博客

06-24

2632

PC端全局响应式布局 根据分辨率720到1080或者根据窗口尺寸两个方法room和transform：scale(x,y) 1、css3的room 对px有效，对rem无效由于resize事件可以以较高的速率触发, 因此事件处理程序不应该执行计算开销很大的操作 MDN推荐三种resize方法 window.onload = function(){ document.body.style....

vue 实现响应式布局，移动pc端通用：amfe-flexible和postcss-pxtorem结合使用

yawhom的博客

03-03

2343

在vue.config.js添加配置postcss-pxtorem；（注意：可在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低，没有则新建文件，只需要设置。对于需要特殊元素需要设置的字体自适应，如echarts字体，可以在utils封装一个字体自适应的方法。2.postcss-pxtorem是postcss的插件，用于将像素单元生成rem单位。在main.js引入amfe-flexible。

pc端常用电脑屏幕及响应式

developestudent的博客

02-26

5776

屏幕宽度大小排序分辨率比例和设备尺寸 1024*500 （8.9寸） 1024*768 （比例4：3）（10.4寸、12.1寸、14.1寸、15寸; ） 1280*800 （16：10 ) (15.4寸） 1280*1024 (比例：5：4 ) ( 14.1寸、15.0寸) 1280*854 (比例：15：10 ) ( 15.2） 1366*768 ...

vue3+vite+js 实现移动端，PC端响应式布局